Svojstvo border-color

Svojstvo border-color postavlja boju ivice za sve strane istovremeno ili odvojeno za svaku stranu. Vrednost svojstva mogu biti bilo koje jedinice za boju. Podrazumevana vrednost: ista boja kao i tekst bloka.

Svojstvo je skraćeno svojstvo za sledeća svojstva: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksa

selektor {
	border-color: boja;
}

Broj vrednosti

Svojstvo može prihvatiti 1, 2, 3 ili 4 vrednosti, navedene razmakom:

Broj	Opis
`1`	Tip za sve strane istovremeno.
`2`	Prva vrednost za vrh i dno, druga - za levu i desnu ivicu.
`3`	Prva vrednost za vrh, druga - za levu i desnu ivicu, treća - za donju.
`4`	Prva vrednost za gornju ivicu, druga - za desnu, treća - za donju, četvrta - za levu ivicu.

Primer

Hajde da obojimo ivicu bloka u crvenu boju:

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

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

Primer

Postavimo crvenu ivicu za gornju i donju stranu, a plavu za desnu i levu stranu:

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

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

Primer

Postavimo crvenu ivicu za gornju stranu, plavu za desnu, zelenu za donju, crnu za levu stranu:

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

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

Primer

Postavimo istovremeno različitu debljinu, tip i boju ivice:

<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

Ako boja ivice nije zadata u border-color - uzeće se iz svojstva color:

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

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

Pogledajte takođe

svojstvo border-width,
koje postavlja debljinu ivice
svojstvo border-style,
koje postavlja tip ivice
svojstvo border,
koje je skraćeno svojstvo za ivicu