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

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

Например:

  • border-color: red green blue pink;
    • верхняя сторона рамки красная (red)
    • правая сторона рамки зеленая (green)
    • нижняя сторона рамки синяя (blue)
    • левая сторона рамки розовая (pink)
  • border-color: red green blue;
    • верхняя сторона рамки красная (red)
    • правая и левая стороны рамки зеленые (green)
    • нижняя сторона рамки синяя (blue)
  • border-color: red green;
    • верхняя и нижняя стороны рамки красные (red)
    • правая и левая стороны рамки зеленые (green)
  • border-color: red;
    • все четыре стороны рамки красные (red)

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

CSS синтаксис

border-color: цвет | transparent | initial | inherit;

Возможные значения

ЗначениеОписание
цветУстанавливает цвет рамки (см. Как использовать цвета).
transparentЗначение по умолчанию. Устанавливает, что цвет рамки должен быть прозрачным.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем цвет для четырех сторон рамки параграфа


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