Border-color-ominaisuus

Ominaisuus border-color asettaa reunan värin kaikille sivuille samanaikaisesti tai erikseen kullekin sivulle. Ominaisuuden arvona käytetään mitä tahansa väriyksikköä. Oletusarvo: sama värinä kuin lohkon tekstillä.

Ominaisuus on lyhenne-ominaisuus seuraaville ominaisuuksille: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntaksi

valitsija {
	border-color: väri;
}

Arvojen määrä

Ominaisuus voi ottaa 1, 2, 3 tai 4 arvoa, jotka määritetään välilyönnillä erotettuna:

Määrä	Kuvaus
`1`	Tyyppi kaikille sivuille samanaikaisesti.
`2`	Ensimmäinen arvo ylä- ja alareunalle, toinen - vasemmalle ja oikealle reunalle.
`3`	Ensimmäinen arvo yläreunalle, toinen - vasemmalle ja oikealle reunalle, kolmas - alareunalle.
`4`	Ensimmäinen arvo yläreunalle, toinen - oikealle, kolmas - alareunalle, neljäs - vasemmalle reunalle.

Esimerkki

Asetetaan lohkon reunan väriksi punainen:

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

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

Esimerkki

Asetetaan punainen reuna ylä- ja alareunalle, ja sininen oikealle ja vasemmalle reunalle:

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

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

Esimerkki

Asetetaan punainen reuna yläreunalle, sininen oikealle, vihreä alareunalle, musta vasemmalle reunalle:

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

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

Esimerkki

Asetetaan samanaikaisesti eri paksuus, tyyppi ja reunan väri:

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

Esimerkki

Jos reunan väriä ei ole asetettu border-color:ssa - se otetaan ominaisuudesta color:

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

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

Katso myös

ominaisuus border-width,
joka asettaa reunan paksuuden
ominaisuus border-style,
joka asettaa reunan tyypin
ominaisuus border,
joka on lyhenne-ominaisuus reunalle