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;
- все бордюры желтого цвета
Заметка: для облегчения запоминания порядка окрашивания бордюров можно запомнить два простых правила:
- Бордюры нумеруются с верхнего по часовой стрелки
- Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.
Заметка: всегда задавайте свойство border-style перед свойством border-color. Элемент должен иметь бордюры, для которых вы хотите изменить цвет.
Значение по умолчанию | нет |
---|---|
Наследование | нет |
Версия CSS | CSS 1 |
Синтаксис JavaScript | object.style.borderColor=»#FF0000 blue» |
Поддержка в браузерах
Свойство border-color поддерживается всеми основными браузерами.
Заметка: Internet Explorer 6 и более ранние версии не поддерживают значение «transparent» (прозрачный).
Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.
Возможные значения свойства border-color
Значение | Описание |
---|---|
название_цвета | Название цвета, например, red (красный) |
десятичный код цвета | Десятичный код цвета, например, #ff0000 (не забываем вставить символ решетки перед кодом) |
код цвета rgb | Код RGB например, rgb(255,0,0) |
transparent | Прозрачный (значение по умолчанию) |
inherit | Родительский, это означает, что значение наследуется от родительского элемента |
Связанные страницы
Учебник CSS: CSS border