border-color

Пример

Устанавливает цвет четырех границы:

<html>
<head>
<meta charset="utf-8" />
<style>
     p.one { border-style:solid; border-color:#0000ff; }
     p.two { border-style:solid; border-color:#ff0000 #0000ff; }
     p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; }
     p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);}
</style>
</head>
<body>
<p class="one">Граница в одном цвете!</p>
<p class="two">Граница в двух цветах!</p>
<p class="three">Граница в трех цветах!</p>
<p class="four">Граница в четырех цветах!</p>
<p><b>Примечание:</b> Свойство "border-color" не работает если используется один. Используйте свойство "border-style" для установки границ вначале.</p>
</body>
</html>

Результат выполнения кода выше:

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

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

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

Примеры:

border-color:red green blue pink;
- верхняя граница красная
- правая граница зеленая
- нижняя граница голубая
- левая граница розовая
border-color:red green blue;
- верхняя граница красная
- правая и левая граница зеленые
- нижняя граница голубая
border-color:dotted red green;
- верхняя и нижняя граница красные
- правая и левая граница зеленые
border-color:red;
- все четыре границы красные

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

Значение по умолчанию:	не определено
Унаследованный:	нет
Версия:	CSS1
Синтакс JavaScript:	`object.style.borderColor="#FF0000 blue"`

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

Свойство border-color поддерживается во всех ведущих браузерах.

Примечание: Internet Explorer 6 (и более ранние версии) не поддерживают значение свойства "transparent".

Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение свойства "inherit".

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

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

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

CSS пособие: CSS Границы

jQuery пособие: css()

Была ли эта информация полезной?

Да Нет