Свойство CSS border-right-width
Свойство border-right-width задаёт ширину правой границы элемента. Все значения свойства с примерами.
CSS-свойство border-right-width задаёт ширину (толщину) только правой границы элемента. Оно управляет лишь одной стороной, что удобно, когда нужна асимметричная граница — например, толстая акцентная линия справа у сайдбара или врезки, тогда как остальные три стороны остаются тонкими или отсутствуют.
Ширину правой границы можно также задать через сокращённые свойства border или border-width. Используйте border-right-width, когда нужно изменить или скорректировать только одну сторону, не затрагивая остальные.
Почему сначала нужен стиль границы
Граница не имеет видимой ширины без стиля. Если задать border-right-width, но оставить стиль правой границы по умолчанию (none), ничего не отобразится — граница со стилем none сворачивается до нуля вне зависимости от указанной ширины. Поэтому сначала всегда объявляйте стиль с помощью border-right-style, border-style или сокращения border. Для установки цвета см. border-right-color.
/* Width alone does nothing — there is no style to give it a width. */
.broken {
border-right-width: 8px;
}
/* Style + width — now the 8px right border is visible. */
.works {
border-right-style: solid;
border-right-width: 8px;
}Спецификация не определяет точную толщину для каждого ключевого слова. Однако они всегда следуют в таком порядке: thin ≤ medium ≤ thick.
Спецификация не определяет, как соединяются границы разной ширины и стиля в углах.
| Начальное значение | medium |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследование | Нет |
| Анимируемость | Да. Ширина границы анимируется. |
| Версия | CSS1 |
| DOM Syntax | object.style.borderRightWidth = "5px"; |
Синтаксис
Синтаксис свойства CSS border-right-width
border-right-width: medium | thin | thick | length | initial | inherit;Пример свойства border-right-width:
Пример свойства CSS border-right-width со значением thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
width: 50%;
border-style: dotted;
border-right-width: thick;
}
</style>
</head>
<body>
<h2>Border-right-width example</h2>
<p>As you can see the width of the right border is set to thick.</p>
</body>
</html>Пример свойства border-right-width со всеми значениями:
Пример свойства CSS border-right-width со значениями medium, thin, thick, px, initial и inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-width example classes */
.b1 {
border-right-width: medium;
}
.b2 {
border-right-width: thin;
}
.b3 {
border-right-width: thick;
}
.b4 {
border-right-width: 10px;
}
.b5 {
border-right-width: initial;
}
.b6 {
border-right-width: inherit;
}
</style>
</head>
<body>
<h1>Border-right-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Результат
![Свойство CSS border-right-width](/uploads/media/default/0001/03/ed2548511ad8d4ee5076d931f7bb68eeb452cec5.png "Свойство CSS border-right-width" =420x)
Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| medium | Задаёт среднюю ширину правой границы. Является значением по умолчанию. | Попробуйте » |
| thin | Задаёт тонкую правую границу. Точная ширина определяется пользовательским агентом. | Попробуйте » |
| thick | Задаёт толстую правую границу. Точная ширина определяется пользовательским агентом. | Попробуйте » |
| length | Задаёт толщину правой границы явным значением длины. Например: 10px, 5em, 8pt и т. д. Отрицательные значения недопустимы. | Попробуйте » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробуйте » |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
- border-right-style — обязательно для отображения ширины.
- border-right-color — задаёт цвет правой границы.
- border-right — сокращение для ширины, стиля и цвета правой границы.
- border-width — задаёт ширину всех четырёх сторон одновременно.
- border-left-width, border-top-width, border-bottom-width — свойства ширины для каждой из остальных сторон.