CSS свойство border-color, поддержка в браузерах, примеры использования // Вебшкола онлайн



up_violet-9141262Перейти к справке CSS

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

}

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

Свойство CSS border-color задает цвет всех четырех бордюров. Свойсто border-color может иметь от одного до четырех значений.

Примеры:

  • border-color:yellow green blue pink;
    • верхний бордюр желтого цвета
    • правый бордюр зеленого цвета
    • нижний бордюр синего цвета
    • левый бордюр розового цвета

  • border-color:yellow green blue;
    • верхний бордюр желтого цвета
    • правый и левый бордюры зеленого цвета
    • нижний бордюр синего цвета

  • border-color:yellow green;
    • верхний и нижний бордюры желтого цвета
    • правый и левый бордюры зеленого цвета

  • border-color:yellow;
    • все бордюры желтого цвета

Заметка: для облегчения запоминания порядка окрашивания бордюров можно запомнить два простых правила:

  1. Бордюры нумеруются с верхнего по часовой стрелки
  2. Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.

Заметка: всегда задавайте свойство border-style перед свойством border-color. Элемент должен иметь бордюры, для которых вы хотите изменить цвет.

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderColor=»#FF0000 blue»

Поддержка в браузерах

chrome-4559309 firefox-8743434 ie-9233672 opera-4553016 safari-3836028
Свойство border-color поддерживается всеми основными браузерами.

Заметка: Internet Explorer 6 и более ранние версии не поддерживают значение «transparent» (прозрачный).

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

Возможные значения свойства border-color

Значение Описание
название_цвета Название цвета, например, red (красный)
десятичный код цвета Десятичный код цвета, например, #ff0000 (не забываем вставить символ решетки перед кодом)
код цвета rgb Код RGB например, rgb(255,0,0)
transparent Прозрачный (значение по умолчанию)
inherit Родительский, это означает, что значение наследуется от родительского элемента

Связанные страницы

Учебник CSS: CSS border

up_violet-9141262Перейти к справке CSS