Свойство CSS border-right-color
Свойство border-right-color задаёт цвет правой границы элемента. Все значения свойства с примерами.
CSS-свойство border-right-color задаёт цвет правой границы элемента. Оно позволяет стилизовать правый край независимо от трёх других сторон, что удобно для разделителей, выносок и асимметричных блочных дизайнов.
Граница состоит из трёх составляющих — ширины, стиля и цвета — и все три должны присутствовать, чтобы граница отображалась. Один лишь цвет ничего не нарисует, поскольку граница без стиля по умолчанию принимает значение none. Поэтому при задании border-right-color убедитесь, что стиль также указан с помощью border-style или border-right-style. Ширина по умолчанию равна medium; изменить её можно через border-width или border-right-width.
Если нужно задать все стороны сразу, воспользуйтесь сокращённым свойством border-color, которое принимает до четырёх значений для верхнего, правого, нижнего и левого краёв.
| Начальное значение | currentColor |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимируется | Да. Цвет правой границы поддаётся анимации. |
| Версия | CSS1 |
| DOM Синтаксис | object.style.borderRightColor = "black"; |
Синтаксис
border-right-color: color | transparent | initial | inherit;Значение — одиночный <color> или одно из общих CSS-ключевых слов. Обратите внимание, что в отличие от сокращённого свойства border-color, это свойство никогда не принимает более одного значения — оно влияет только на правую сторону.
Пример свойства border-right-color
В примере ниже к блоку применяется однородная серая граница, после чего только правый край перекрашивается в синий:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-right-color example</h2>
<div>Example for the border-right-color property with different right border color.</div>
</body>
</html>Пример со значением "transparent"
Ключевое слово transparent скрывает цвет правой границы, сохраняя занимаемое ею место. Это удобно для создания стрелок и треугольников, а также для предотвращения сдвигов макета при включении и выключении границы:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent right border</h2>
</body>
</html>В качестве значения свойства border-right-color можно использовать шестнадцатеричные значения, RGB, RGBA, HSL, HSLA или именованные цвета.
Результат
Четыре формата значений ниже дают одинаковый результат — они отличаются только способом записи цвета.
Пример с именованным цветом
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Border-right-color property with a named color value.</div>
</body>
</html>Пример с шестнадцатеричным значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-right-color property with a hexadecimal value.</div>
</body>
</html>Пример со значением RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-right-color property with a RGB value.</div>
</body>
</html>Пример со значением HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-right-color property with a HSL value.</div>
</body>
</html>Если не указать border-right-style (или border-style), цвет не будет виден — граница без стиля по умолчанию принимает значение none и вообще не отображается.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| color | Задаёт цвет правой границы. Цвет по умолчанию соответствует цвету текущего элемента. Можно использовать именованные цвета, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). Обязательное значение. | Попробовать » |
| transparent | Применяет прозрачный цвет к правой границе. Правая граница по-прежнему занимает место, определённое значением border-width. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |