Vlastnosť border-color

Vlastnosť border-color nastavuje farbu ohraničenia pre všetky strany súčasne alebo samostatne pre každú stranu. Hodnotou vlastnosti sú ľubovoľné jednotky pre farbu. Predvolená hodnota: rovnaká farba ako farba textu bloku.

Vlastnosť je vlastnosťou-skratkou pre nasledujúce vlastnosti: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntax

selektor {
	border-color: farba;
}

Počet hodnôt

Vlastnosť môže prijať 1, 2, 3 alebo 4 hodnôt, uvedených medzerou:

Počet	Popis
`1`	Typ pre všetky strany súčasne.
`2`	Prvá hodnota pre vrch a dno, druhá - pre ľavú a pravú hranicu.
`3`	Prvá hodnota pre vrch, druhá - pre ľavú a pravú hranicu, tretia - pre dolnú.
`4`	Prvá hodnota pre hornú hranicu, druhá - pre pravú, tretia - pre dolnú, štvrtá - pre ľavú hranicu.

Príklad

Nastavme farbu ohraničenia bloku na červenú:

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

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

Príklad

Nastavme červené ohraničenie pre hornú a dolnú stranu a modrú pre pravú a ľavú stranu:

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

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

Príklad

Nastavme červené ohraničenie pre hornú stranu, modrú pre pravú, zelenú pre dolnú, čiernu pre ľavú stranu:

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

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

Príklad

Nastavme súčasne rôznu hrúbku, typ a farbu ohraničenia:

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

Príklad

Ak farba ohraničenia nie je nastavená v border-color - bude prevzatá z vlastnosti color:

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

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

Pozrite tiež

vlastnosť border-width,
ktorá nastavuje hrúbku ohraničenia
vlastnosť border-style,
ktorá nastavuje typ ohraničenia
vlastnosť border,
ktorá je vlastnosťou-skratkou pre ohraničenie