CSS свойство border-right-color

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>
Hexadecimal, RGB, RGBA, HSL, HSLA или название цвета может быть применен как значение для свойства border-right-color.

Пример 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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1+ 1+ 1+ 3.5+

Практикуйте свои знания

What is mentioned about the 'border-right-color' property in CSS?
Считаете ли это полезным?