Egenskapen border-color

Egenskapen border-color anger färg på kanten för alla sidor samtidigt eller varje sida för sig. Värdet på egenskapen är vilken färgenhet som helst. Standardvärdet: samma färg som blockets text.

Egenskapen är en sammansatt egenskap för följande egenskaper: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntax

selektor {
	border-color: färg;
}

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Antal	Beskrivning
`1`	Typ för alla sidor samtidigt.
`2`	Första värdet för toppen och botten, andra - för vänster och höger kant.
`3`	Första värdet för toppen, andra - för vänster och höger kant, tredje - för botten.
`4`	Första värdet för övre kanten, andra - för höger, tredje - för nedre, fjärde - för vänster kant.

Exempel

Låt oss färga blockets kant i rött:

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

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

Exempel

Ange röd kant för övre och nedre sida, och blå för höger och vänster sida:

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

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

Exempel

Ange röd kant för övre sida, blå för höger, grön för nedre, svart för vänster sida:

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

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

Exempel

Ange samtidigt olika tjocklek, typ och färg på kanten:

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

Exempel

Om kantfärg inte anges i border-color - hämtas den från egenskapen color:

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

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

Se även

egenskapen border-width,
som anger kantens tjocklek
egenskapen border-style,
som anger kantens typ
egenskapen border,
som är en sammansatt egenskap för kanten