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

❮ Назад Вперед ❯

CSS свойство border-color это сокращенное свойство для установления цвета всех сторон элемента: border-top-color, border-right-color, border-bottom-color, border-left-color. Каждая сторона может иметь свое значение. Свойство border-color используется вместе со свойством border-style. Если значение установлено 0, свойство border-color не имеет никакого эффекта.

Свойство может иметь любое значение из CSS colors. Значение по умолчанию-текущий цвет элемента.

Свойство border-color может иметь четыре значения. Если имеет одно значение, цвет применяется для всех границ. Если имеет две значения, первое из них применяется для верхней и нижней границы, второе для правой и левой границы. При трех значений первое используется для верхней границы, второе для правой и левой, а третье для нижней границы. При четырех значений первое применяется для верхней, второе для правой, третье для нижней, а четвертое для левой границы.

Значение по умолчанию	currentColor
Применяется	Ко всем элементам, а также к ::first-letter.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.borderStyle = "dotted double";

Синтаксис

border-color: color | transparent | initial | inherit;

Пример, где применено только одно значение. Оно устанавливает цвет всех сторон элемента:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .dotted {
      border-style: dotted;
      border-color: #1c87c9;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="dotted"> Пример границы blue dotted.</div>
  </body>
</html>

Попробуйте сами!

Рассмотрим пример, где применены три значения. Первое применено для верхней границы, второе для правой и левой, а третье для нижней границы.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .solid {
      border-style: solid;
      border-color: #1c87c9 cyan yellow #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="solid"> Пример со свойством border-color.</div>
  </body>
</html>

Попробуйте сами!

Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства border-color .

Узнать больше о HTML Colors.

Рассмотрим пример со значениями hexadecimal, RGB, HSL и название цвета, которые установлены для border-color :

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      p {
      border: 5px solid #666;
      width: 60%;
      padding: 5px;
      }
      .name {  
      border-color: lightblue;
      }
      .hex {
      border-color: #1c87c9;
      }
      .rgb { 
      border-color: rgba(0,0,0,0.15);
      }
      .hsl { 
      border-color:  hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Граница с названием цвета.</p>
    <p class="hex">Граница со значением hexadecimal.</p>
    <p class="rgb">Граница со значением RGB color.</p>
    <p class="hsl">Граница со значением HSL color.</p>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
color	Устанавливает цвет границ. Значение по умолчанию- текущий цвет элемента. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Необходимое значение.
transparent	Устанавливает прозрачный цвет левой границы.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.