Proprietatea border-color

Proprietatea border-color setează culoarea bordurii pentru toate laturile simultan sau separat pentru fiecare latură. Valoarea proprietății poate fi orice unitate de culoare. Valoarea implicită: aceeași culoare ca și textul blocului.

Proprietatea este o proprietate-scurtătură pentru următoarele proprietăți: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaxă

selector {
	border-color: culoare;
}

Numărul de valori

Proprietatea poate accepta 1, 2, 3 sau 4 valori, specificate prin spațiu:

Număr	Descriere
`1`	Tip pentru toate laturile simultan.
`2`	Prima valoare pentru partea de sus și de jos, a doua - pentru marginile din stânga și dreapta.
`3`	Prima valoare pentru partea de sus, a doua - pentru marginile din stânga și dreapta, a treia - pentru partea de jos.
`4`	Prima valoare pentru bordura superioară, a doua - pentru dreapta, a treia - pentru jos, a patra - pentru bordura din stânga.

Exemplu

Să colorăm bordura blocului în roșu:

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

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

Exemplu

Să setăm o bordură roșie pentru părțile de sus și de jos și albastră pentru părțile din dreapta și stânga:

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

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

Exemplu

Să setăm o bordură roșie pentru partea de sus, albastră pentru dreapta, verde pentru jos, neagră pentru partea din stânga:

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

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

Exemplu

Să setăm simultan grosimi, tipuri și culori diferite pentru bordură:

<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;
}

Exemplu

Dacă culoarea bordurii nu este setată în border-color - aceasta va fi preluată din proprietatea color:

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

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

Veți și

proprietatea border-width,
care setează grosimea bordurii
proprietatea border-style,
care setează tipul bordurii
proprietatea border,
care este proprietatea-scurtătură pentru bordură