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

Определение и использование

Атрибут border-color устанавливает цвет четырех рамок. Этот атрибут может устанавливать от 1 до 4 цветов.

Атрибут border-color — это сокращенная форма, которая может устанавливать цвет видимой части всех рамок элемента или устанавливать различные цвета для каждого из 4 краев. См. следующий пример:

Пример 1

border-color:red green blue pink;
  • Верхняя граница красного цвета
  • Правый отступ зеленый
  • Нижняя граница синего цвета
  • Левая граница розового цвета

Пример 2

border-color:red green blue;
  • Верхняя граница красного цвета
  • Правая и левая границы зеленого цвета
  • Нижняя граница синего цвета

Пример 3

border-color:dotted red green;
  • Верхняя и нижняя границы красного цвета
  • Правая и левая границы зеленого цвета

Пример 4

border-color:red;
  • Все 4 границы красного цвета

Помните, что стиль границы не может быть none или hidden, в противном случае граница не будет видна.

Комментарий:Всегда указывайте атрибут border-style до border-color. Элемент должен получить границу до того, как вы измените его цвет.

См. также:

Уроки CSS:Обрамление CSS

Руководство по HTML DOM:Свойство borderColor

Пример

Установите цвет 4 границ:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

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

CSS синтаксис

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

Значение свойства

Значение Описание
color_name Определяет цвет границы как имя цвета (например, red).
hex_number Определяет цвет границы как шестнадцатеричное значение (например, #ff0000).
rgb_number Определяет цвет границы как значение rgb кода (например, rgb(255,0,0)).
transparent Значение по умолчанию. Цвет границы прозрачен.
inherit Определяет, что цвет границы должен быть наследован от родительского элемента.

Технические детали

Значение по умолчанию: не указано
Ингерит: нет
Версия: CSS1
JavaScript синтаксис: object.style.borderColor="#FF0000 blue"

Более примеров

Установка цвета четырех границ
Этот пример демонстрирует, как установить цвет четырех границ. Можно установить от одного до четырех цветов.

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

Числа в таблице указывают на первую версию браузера, которая поддерживает этот атрибут полностью.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Комментарий:Интернет-эксплорер 6 (и более ранние версии) не поддерживает значение свойства "transparent".

Комментарий:Браузеры IE7 и более ранние версии не поддерживают значение "inherit". IE8 требует !DOCTYPE. IE9 поддерживает "inherit".