Lastnost border-color

Lastnost border-color določa barvo obrobe za vse strani hkrati ali ločeno za vsako stran. Vrednost lastnosti so poljubne enote za barvo. Privzeta vrednost: enaka barva kot besedila bloka.

Lastnost je okrajšava za naslednje lastnosti: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksa

selektor {
	border-color: barva;
}

Število vrednosti

Lastnost lahko sprejme 1, 2, 3 ali 4 vrednosti, ločene s presledkom:

Število	Opis
`1`	Tip za vse strani hkrati.
`2`	Prva vrednost za vrh in dno, druga - za levo in desno obrobo.
`3`	Prva vrednost za vrh, druga - za levo in desno obrobo, tretja - za spodnjo.
`4`	Prva vrednost za zgornjo obrobo, druga - za desno, tretja - za spodnjo, četrta - za levo obrobo.

Primer

Obrobo bloka pobarvajmo rdeče:

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

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

Primer

Nastavimo rdečo obrobo za zgornjo in spodnjo stran, modro pa za desno in levo stran:

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

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

Primer

Nastavimo rdečo obrobo za zgornjo stran, modro za desno, zeleno za spodnjo, črno za levo stran:

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

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

Primer

Nastavimo hkrati različno debelino, tip in barvo obrobe:

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

Primer

Če barva obrobe ni nastavljena v border-color - se bo vzela iz lastnosti color:

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

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

Glejte tudi

lastnost border-width,
ki določa debelino obrobe
lastnost border-style,
ki določa tip obrobe
lastnost border,
ki je okrajšava za obrobo