Eienskap border-color

Die eienskap border-color stel die kleur van die rand vir al die kante gelyktydig of afsonderlik vir elke kant in. Enige eenhede vir kleur kan as waarde dien. Standaardwaarde: dieselfde kleur as die teks van die blok.

Die eienskap is 'n verkorte eienskap vir die volgende eienskappe: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintaksis

selektor {
	border-color: kleur;
}

Aantal waardes

Die eienskap kan 1, 2, 3 of 4 waardes aanvaar, gespesifiseer met 'n spasie tussen hulle:

Aantal	Beskrywing
`1`	Tipe vir al die kante gelyktydig.
`2`	Eerste waarde vir bo en onder, tweede - vir linker en regter grense.
`3`	Eerste waarde vir bo, tweede - vir linker en regter grense, derde - vir onderste.
`4`	Eerste waarde vir die boonste grens, tweede - vir die regter, derde - vir die onderste, vierde - vir die linker grens.

Voorbeeld

Kom ons kleur die rand van die blok rooi:

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

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

Voorbeeld

Laat ons 'n rooi rand vir die boonste en onderste kant instel, en 'n ligblou een vir die regter en linker kant:

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

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

Voorbeeld

Stel 'n rooi rand vir die boonste kant in, ligblou vir die regter, groen vir die onderste, swart vir die linker kant:

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

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

Voorbeeld

Stel gelyktydig verskillende dikte, tipe en kleur van die rand 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

As die randkleur nie in border-color gespesifiseer is nie - sal dit van die eienskap color geneem word:

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

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

Sien ook

die eienskap border-width,
wat die dikte van die rand instel
die eienskap border-style,
wat die tipe van die rand instel
die eienskap border,
wat die verkorte eienskap vir die rand is