CSS свойство border-right-color устанавливает цвет правой границы элемента.
Цвет правой границы, вместе с цветами верхней, правой и нижней границы, может быть также установлен сокращенным свойством border-color.
При использовании свойства border-right-color необходимо сначала установить свойство border-style или border-right-style и дальше изменить цвет установленного стиля.
Толщина границы по умолчанию - medium. Толщину можно установить используя свойство border-width или border-right-width.
| Значение по умолчанию | currentColor |
| Применяется | Ко всем элементам, а также к ::first-letter. |
| Наследуется | Нет |
| Анимируемое | Да. Цвет левой границы анимируем. |
| Версия | CSS1 |
| DOM синтаксис | object.style.borderRightColor = "black"; |
Синтаксис
border-right-color: color | transparent | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Пример border-right-color</h2>
<div>Пример свойства border-right-color с разными цветами правой границы.</div>
</body>
</html>Рассмотрим другой пример, где установлено значение transparent для правой границы:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>Заголовок с transparent right border</h2>
</body>
</html>Пример CSS border-right-color , где значением является название цвета:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Свойство border-right-color с значением названия цвета.</div>
</body>
</html>Пример, где установлено значение hexadecimal для свойстваborder-right-color property:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Свойство border-right-color с значением hexadecimal.</div>
</body>
</html>Пример с border-right-color , где используется значение RGB:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div> Свойство border-right-color с значением RGB.</div>
</body>
</html>Пример border-right-color , где используется значение HSL:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Свойство border-right-color с значением HSL.</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| color | Устанавливает цвет правой границы. Цвет по умолчанию - цвет текущего элемента. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Необходимое значение. |
| transparent | Устанавливает прозрачный цвет правой границы. Правая граница может занять место, установленное значением border-width. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ |
Практикуйте свои знания
