Eigenschap border-color

De eigenschap border-color stelt de kleur van de rand in voor alle zijden tegelijk of afzonderlijk voor elke zijde. De waarde van de eigenschap zijn alle eenheden voor kleur. Standaardwaarde: dezelfde kleur als de tekst van het blok.

De eigenschap is een verkorte eigenschap voor de volgende eigenschappen: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntaxis

selector {
	border-color: kleur;
}

Aantal waarden

De eigenschap kan 1, 2, 3 of 4 waarden aannemen, gescheiden door een spatie:

Aantal	Beschrijving
`1`	Type voor alle zijden tegelijk.
`2`	Eerste waarde voor boven- en onderkant, tweede - voor linker- en rechterrand.
`3`	Eerste waarde voor bovenkant, tweede - voor linker- en rechterrand, derde - voor onderkant.
`4`	Eerste waarde voor de bovenrand, tweede - voor de rechter, derde - voor de onderkant, vierde - voor de linkerrand.

Voorbeeld

Laten we de rand van het blok rood kleuren:

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

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

Voorbeeld

Stel een rode rand in voor de boven- en onderkant en een blauwe voor de rechter- en linkerkant:

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

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

Voorbeeld

Stel een rode rand in voor de bovenkant, een blauwe voor de rechterkant, een groene voor de onderkant, een zwarte voor de linkerkant:

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

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

Voorbeeld

Stel tegelijkertijd verschillende dikte, type en randkleur in:

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

Voorbeeld

Als de randkleur niet is ingesteld in border-color - wordt deze overgenomen van de eigenschap color:

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

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

Zie ook

de eigenschap border-width,
die de randdikte instelt
de eigenschap border-style,
die het randtype instelt
de eigenschap border,
die de verkorte eigenschap voor de rand is