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

Свойство CSS border-color устанавливает цвет четырёх сторон рамки элемента. Оно соответствует следующим свойствам:

Каждая сторона может иметь собственное значение. Свойство border-color используется вместе со свойством border-style. Если border-width равен 0, или border-style имеет значение none или hidden, цвет рамки не будет виден.

Это свойство принимает любое значение из CSS цветов. Цвет по умолчанию — текущий цвет элемента.

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

Начальное значение	currentColor
Применяется к	Ко всем элементам. Также применяется к ::first-letter.
Наследуется	Нет.
Анимация	Да. Рамки блока анимируются.
Версия	CSS1
Синтаксис DOM	object.style.borderColor = "red";

Синтаксис

Синтаксис свойства CSS border-color

css

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

Ниже приведён пример, где применяется только одно значение. Оно задаёт цвет для всех четырёх сторон элемента.

Пример свойства border-color:

Пример свойства CSS border-color с одним значением

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .dotted {
        border-style: dotted;
        border-color: #1c87c9;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="dotted">Example with blue dotted border.</div>
  </body>
</html>

Try it Yourself »

Результат

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

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

Пример свойства border-color с 4 значениями:

Пример свойства CSS border-color с 4 значениями

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .solid {
        border-style: solid;
        border-color: #1c87c9 cyan yellow #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="solid">Example with border-color property.</div>
  </body>
</html>

Try it Yourself »

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

TIP

Подробнее об цветах HTML.

Пример свойства border-color со значением "color":

Пример свойства CSS border-color со значениями шестнадцатеричного кода, RGB, HSL и названия цвета

html

<!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">Border with a named color.</p>
    <p class="hex">Border with a hexadecimal value.</p>
    <p class="rgb">Border with a RGB color value.</p>
    <p class="hsl">Border with a HSL color value.</p>
  </body>
</html>

Try it Yourself »

Значения

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

Practice

Какие из следующих утверждений верны для свойства 'border-color' в CSS?

Свойство 'border-color' используется для изменения цвета рамок.Свойство 'border-color' применяется к строкам таблицы.Свойство 'border-color' не применяется к элементам, если свойство border-style не было задано ранее.Свойство 'border-color' может принимать более одного значения цвета и применять их к разным сторонам рамки.Свойство 'border-color' не может принимать названия цветов, RGB, HEX, HSL или transparent в качестве возможных значений.

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

Синтаксис ​

Пример свойства border-color: ​

Результат ​

Пример свойства border-color с 4 значениями: ​

Пример свойства border-color со значением "color": ​

Значения ​

Practice ​

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

Синтаксис

Пример свойства border-color:

Результат

Пример свойства border-color с 4 значениями:

Пример свойства border-color со значением "color":

Значения

Practice