Свойство CSS border-right-style
Свойство CSS border-right-style задаёт стиль линии правой границы элемента. Все значения свойства с примерами.
Свойство CSS border-right-style задаёт стиль линии правой границы элемента, например solid, dashed или dotted. Значение — одно ключевое слово из того же набора, что доступен сокращённому свойству border-style. Разница в том, что border-style стилизует все четыре стороны одновременно, тогда как border-right-style воздействует только на правый край.
Это поэлементное дополнение к border-style. Используйте его, когда правая граница должна отличаться по стилю от остальных — например, сплошной разделитель справа у боковой панели при отсутствии границ сверху, снизу и слева.
Почему граница может не отображаться
Граница состоит из трёх независимых частей: стиля, ширины и цвета. Стиль — единственная обязательная часть: если стиль не задан, браузер использует значение по умолчанию none и граница вообще не рисуется, какими бы ни были ширина и цвет. Именно border-right-style делает правую границу видимой.
Ширина правой границы по умолчанию равна medium. Измените её с помощью border-right-width или border-width, а цвет задайте свойством border-right-color. Чтобы указать стиль, ширину и цвет в одном объявлении, используйте сокращённое свойство border-right.
Не все браузеры отображают стили одинаково. Например, Chrome рендерит dotted в виде небольших квадратов, а не кругов, а точное расстояние между точками и штрихами остаётся на усмотрение браузера.
Спецификация не определяет величину пространства между точками и штрихами.
Спецификация не определяет, как границы разных стилей соединяются в углах.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимируется | Нет |
| Версия | CSS1 |
| DOM Синтаксис | object.style.borderRightStyle = "dashed"; |
Синтаксис
Синтаксис свойства CSS border-right-style
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Пример свойства border-right-style:
Пример CSS border-right-style со значениями solid и dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-right-style: solid;
}
p {
border-right-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with solid border-right-style.</h2>
<p>A paragraph with dotted border-right-style.</p>
</body>
</html>Посмотрите на пример, где используются все значения стиля, чтобы увидеть разницу между ними:
В зависимости от значения border-color эффект значений groove, ridge, inset и outset может изменяться.
Пример свойства border-right-style со всеми значениями:
Пример CSS border-right-style со значениями hidden, dotted, dashed, solid, double, groove, ridge, inset и outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
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;
background-color: #1c87c9;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-style example classes */
.b1 {
border-right-style: hidden;
}
.b2 {
border-right-style: dotted;
}
.b3 {
border-right-style: dashed;
}
.b4 {
border-right-style: solid;
}
.b5 {
border-right-style: double;
}
.b6 {
border-right-style: groove;
}
.b7 {
border-right-style: ridge;
}
.b8 {
border-right-style: inset;
}
.b9 {
border-right-style: outset;
}
</style>
</head>
<body>
<h1>Border-right-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Результат
Значения
| Значение | Описание | Пример |
|---|---|---|
| none | Определяет отсутствие границы. Значение по умолчанию. | Пример » |
| hidden | То же, что «none», за исключением разрешения конфликтов границ для табличных элементов. | Пример » |
| dotted | Задаёт точечную границу. | Пример » |
| dashed | Задаёт пунктирную границу. | Пример » |
| double | Задаёт двойную границу. | Пример » |
| solid | Задаёт сплошную границу. | Пример » |
| groove | Задаёт трёхмерную рифлёную границу. Эффект зависит от значения border-color. | Пример » |
| ridge | Задаёт трёхмерную выступающую границу. Эффект зависит от значения border-color. | Пример » |
| inset | Задаёт трёхмерную утопленную границу. Эффект зависит от значения border-color. | Пример » |
| outset | Задаёт трёхмерную выпуклую границу. Эффект зависит от значения border-color. | Пример » |
| initial | Устанавливает свойство в значение по умолчанию. | Пример » |
| inherit | Наследует значение свойства от родительского элемента. |
none vs hidden
Оба ключевых слова выглядят одинаково на обычном элементе — ни то, ни другое не рисует линию. Разница проявляется только в таблицах с объединёнными границами: при border-collapse: collapse граница hidden побеждает при разрешении конфликта границ и подавляет границу соседней ячейки, тогда как none имеет наименьший приоритет и перекрывается любой соседней границей.
Связанные свойства
- border-right — сокращённое свойство для ширины, стиля и цвета правой границы.
- border-right-width и border-right-color — две другие составляющие правой границы.
- border-style — задаёт стиль линии всех четырёх сторон одновременно.