Vlastnost border-color

Vlastnost border-color nastavuje barvu ohraničení pro všechny strany současně nebo samostatně pro každou stranu. Hodnotou vlastnosti jsou libovolné jednotky pro barvu. Výchozí hodnota: stejná barva jako u textu bloku.

Vlastnost je zkratkovou vlastností pro následující vlastnosti: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntaxe

selektor {
	border-color: barva;
}

Počet hodnot

Vlastnost může přijímat 1, 2, 3 nebo 4 hodnot, uvedených mezerou:

Počet	Popis
`1`	Typ pro všechny strany současně.
`2`	První hodnota pro horní a dolní stranu, druhá - pro levou a pravou hranici.
`3`	První hodnota pro horní stranu, druhá - pro levou a pravou hranici, třetí - pro dolní.
`4`	První hodnota pro horní hranici, druhá - pro pravou, třetí - pro dolní, čtvrtá - pro levou hranici.

Příklad

Nastavme ohraničení bloku na červenou barvu:

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

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

Příklad

Nastavme červené ohraničení pro horní a dolní stranu a modrou pro pravou a levou stranu:

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

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

Příklad

Nastavme červené ohraničení pro horní stranu, modrou pro pravou, zelenou pro dolní, černou pro levou stranu:

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

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

Příklad

Nastavme současně různou tloušťku, typ a barvu ohraničení:

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

Příklad

Pokud barva ohraničení není nastavena v border-color - bude převzata z vlastnosti color:

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

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

Viz také

vlastnost border-width,
která nastavuje tloušťku ohraničení
vlastnost border-style,
která nastavuje typ ohraničení
vlastnost border,
která je zkratkovou vlastností pro ohraničení