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

Существуют также свойства border-top-color, border-bottom-color, border-left-color, border-right-color, которые задают цвета для каждой стороны границы.

См. также свойства border-width и border-style, а также свойство-сокращение для границы border.

Синтаксис

селектор {
	border-color: цвет в любом CSS формате;
}

Может принимать 1, 2, 3 или 4 параметра:

Число параметров Описание
1 Тип для всех сторон одновременно.
2 Первый параметр для верха и низа, второй - для левой и правой границ.
3 Первый параметр для верха, второй - для левой и правой границ, третий - для нижней.
4 Первый параметр для верхней границы, второй - для правой, третий - для нижней, четвертый - для левой границы.

Значения

Значение Описание
Цвет Цвет в любом в CSS формате.
transparent Прозрачная граница.
inherit Наследует значение родителя.

Значение по умолчанию: отсутствует.

Если не задано определенное значение - цвет границы возьмется из свойства color, то есть будет совпадать с цветом текста.

Примеры

Пример

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

Пример

Зададим красную границу (red) для верхней и нижней, а голубую (blue) для правой и левой стороны:

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

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

Пример

Красная граница (red) для верхней стороны, голубая (blue) для правой, зеленая (green) для нижней, черная (black) для левой стороны:

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим одновременно разную толщину, тип и цвет границы:

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

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

Пример

Если цвет границы не задан в border-color - он возьмется из свойства color:

p {
	color: red;
	border-style: solid;
	border-width: 2px;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna.