Свойство border-color

Свойството border-color задава цвят на границата за всички страни едновременно или отделно за всяка страна. Стойност на свойството са всякакви единици за цвят. Стойност по подразбиране: същият цвят, както и на текста на блока.

Свойството е свойство-съкращение за следните свойства: border-left-color, border-right-color, border-top-color, border-bottom-color.

Синтаксис

селектор {
	border-color: цвят;
}

Брой стойности

Свойството може да приема 1, 2, 3 или 4 стойности, посочвани чрез интервал:

Брой	Описание
`1`	Тип за всички страни едновременно.
`2`	Първа стойност за горе и долу, втора - за лява и дясна граница.
`3`	Първа стойност за горе, втора - за лява и дясна граница, трета - за долна.
`4`	Първа стойност за горна граница, втора - за дясна, трета - за долна, четвърта - за лява граница.

Пример

Нека оцветим границата на блока в червен цвят:

<div id="elem"></div>

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

Пример

Зададем червена граница за горната и долната страна, а синя за дясната и лявата страна:

<div id="elem"></div>

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

Пример

Зададем червена граница за горната страна, синя за дясната, зелена за долната, черна за лявата страна:

<div id="elem"></div>

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

Пример

Зададем едновременно различна дебелина, тип и цвят на границата:

<div id="elem"></div>

#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:

<div id="elem"></div>

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

Вижте също

свойство border-width,
което задава дебелина на границата
свойство border-style,
което задава тип на границата
свойство border,
което е свойство-съкращение за границата