border-right-width

Базовая Широко поддерживаемая

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она поддерживается браузерами с июля 2015 года.

Свойство border-right-width CSS задаёт ширину правой границы элемента.

Попробовать

Синтаксис

/* Keyword values */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/* <length> values */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

/* Global keywords */
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: revert-layer;
border-right-width: unset;

Значения

<line-width>

Определяет ширину границы, либо как явное неотрицательное <length>, либо как ключевое слово. Если это ключевое слово, оно должно быть одним из следующих:

thin
medium
thick

Примечание: Поскольку спецификация не определяет точную толщину, обозначаемую каждым ключевым словом, точный результат при использовании одного из них зависит от реализации. Тем не менее, они всегда следуют шаблону thin ≤ medium ≤ thick, и значения постоянны в пределах одного документа.

Формальное определение

Начальное значение	`medium`
Применимо к	всем элементам. Также применяется к `::first-letter`.
Наследуется	нет
Вычисленное значение	абсолютная длина или `0` если `border-right-style` равно `none` или `hidden`
Тип анимации	длина

Формальный синтаксис

border-right-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Примеры

Сравнение ширины границ

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}

Результат

Спецификации

Спецификация
CSS Backgrounds and Borders Module Level 3 # the-border-width

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`border-right-width`	1	12	1	3.5	1	18	4	10.1	1	1.0	2.2

См. также

Другие свойства CSS, относящиеся к ширине границ: border-bottom-width, border-left-width, border-top-width и border-width.
Другие свойства CSS, относящиеся к правой границе: border, border-right, border-right-style и border-right-color.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width