Свойство CSS `border-right-width`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Свойство border-right-width CSS задаёт ширину правой границы элемента.
Попробуйте
border-right-width: thick;
border-right-width: 2em;
border-right-width: 4px;
border-right-width: 2ex;
border-right-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Синтаксис
/* 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. Значение по умолчанию —medium.
Формальное определение
| Исходное значение | medium |
|---|---|
| Применяется к | всем элементам |
| Наследуется | нет |
| Вычисленное значение | абсолютное значение <length>, округлённое до ширины линии |
| Тип анимации | a <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Values of the <length> CSS data type are interpolated as real, floating-point numbers.">длина</a> |
Формальный синтаксис
border-right-width = <line-width> <line-width> = <length> | 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, уровень 3 # border-width |
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Samsung Internet | WebView для Android | WebView на iOS | |
border-right-width |
1 |
12 |
1 |
3.5 |
1 |
18 |
4 |
10.1 |
1 |
1.0 |
2.2 |
1 |
medium |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
thick |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
thin |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
См. также
- Другие свойства CSS, связанные с шириной границ:
border-bottom-width,border-left-width,border-top-widthиborder-width. - Другие свойства CSS, связанные с правой границей:
border,border-right,border-right-styleиborder-right-color.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-right-width
