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

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

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 12+
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
Да Да Да Да Да Да Да

Краткая информация

Значение по умолчанию initial
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Реализация в javascript
document.getElementById('idElement').style.borderColor = 'red';
в данном случае элементу с id='idElement' будет добавлен стиль
border-color:red;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="border-color:red;">...</div>
Реализация в jQuery
$('#idElement').css('border-color','red);
в данном случае элементу с id='idElement' будет добавлен стиль
border-color:red;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="border-color:red;">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Перед использованием данного свойства необходимо задать стиль через border или border-style и толщину границы через border или border-width.

Число значений Результат
1
  1. Устанавливает цвет границы у всех четырех сторон элемента.
2
  1. Первое значение устанавливает цвет для верхней и нижней границы,
  2. второе значение устанавливает цвет для правой и левой границы элемента.
3
  1. Первое значение устанавливает цвет для верхней границы,
  2. второе значение устанавливает цвет для правой и левой границы элемента,
  3. третье значение устанавливает цвет нижней границы.
4
  1. Первое значение устанавливает цвет для верхней границы,
  2. второе значение устанавливает цвет для правой границы элемента,
  3. третье значение устанавливает цвет нижней границы,
  4. четвертое значение устанавливает цвет для левой границы элемента.

Синтаксис

border-color: [цвет | transparent {1,4}] | inherit;

Например:

... border-color: red; или border-color: inherit; ...

Значения

transparent

Устанавливает прозрачный цвет у границы элемента.

inherit Наследует значение родителя.
цвет Цвет в любом допустимом CSS стандартом формате.

Пример

border-color:#dfff2f;
border-color:red rgba(170, 50, 220, .6);
border-color:rgba(0, 152, 133, 1) #dfff2f red;
border-color:rgba(0, 152, 133, 1) #dfff2f red blue;

Результат

В этом блоке показан пример использования свойства border-color:#dfff2f;.