A border-color tulajdonság

A border-color tulajdonság a szegély színét határozza meg egyszerre minden oldalon, vagy külön-külön minden oldalra. A tulajdonság értéke bármilyen szín egység lehet. Alapértelmezett érték: ugyanaz a szín, mint a blokk szövegének.

A tulajdonság rövidítés a következő tulajdonságokra: border-left-color, border-right-color, border-top-color, border-bottom-color.

Szintaxis

szelektor {
	border-color: szín;
}

Értékek száma

A tulajdonság 1, 2, 3 vagy 4 értéket fogadhat el, szóközzel elválasztva:

Szám	Leírás
`1`	Típus minden oldalra egyszerre.
`2`	Első érték a felső és alsó oldalra, második - a bal és jobb oldali szegélyekre.
`3`	Első érték a felső oldalra, második - a bal és jobb oldali szegélyekre, harmadik - az alsó oldalra.
`4`	Első érték a felső szegélyre, második - a jobb oldalira, harmadik - az alsóra, negyedik - a bal oldali szegélyre.

Példa

Állítsuk be a blokk szegélyének színét pirosra:

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

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

Példa

Állítsunk be piros szegélyt a felső és alsó oldalra, és kéket a jobb és bal oldalra:

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

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

Példa

Állítsunk be piros szegélyt a felső oldalra, kéket a jobb oldalira, zöldet az alsóra, feketét a bal oldalira:

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

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

Példa

Állítsunk be egyszerre különböző vastagságot, típust és színt a szegélynek:

<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élda

Ha a szegély színe nincs megadva a border-color -tulajdonságban - akkor a color tulajdonságból veszi át:

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

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

Lásd még

a border-width tulajdonság,
amely a szegély vastagságát határozza meg
a border-style tulajdonság,
amely a szegély típusát határozza meg
a border tulajdonság,
amely a szegélyre vonatkozó rövidített tulajdonság