Proprietà border-color

La proprietà border-color imposta il colore del bordo per tutti i lati contemporaneamente o separatamente per ogni lato. I valori della proprietà possono essere qualsiasi unità di colore. Valore predefinito: lo stesso colore del testo del blocco.

La proprietà è una proprietà abbreviata per le seguenti proprietà: border-left-color, border-right-color, border-top-color, border-bottom-color.

Sintassi

selettore {
	border-color: colore;
}

Numero di valori

La proprietà può accettare 1, 2, 3 o 4 valori, specificati separati da spazi:

Quantità	Descrizione
`1`	Tipo per tutti i lati contemporaneamente.
`2`	Primo valore per l'alto e il basso, secondo - per i bordi sinistro e destro.
`3`	Primo valore per l'alto, secondo - per i bordi sinistro e destro, terzo - per quello inferiore.
`4`	Primo valore per il bordo superiore, secondo - per il destro, terzo - per quello inferiore, quarto - per il bordo sinistro.

Esempio

Coloriamo il bordo del blocco in rosso:

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

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

Esempio

Impostiamo un bordo rosso per i lati superiore e inferiore, e blu per i lati destro e sinistro:

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

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

Esempio

Impostiamo un bordo rosso per il lato superiore, blu per il destro, verde per quello inferiore, nero per il lato sinistro:

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

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

Esempio

Impostiamo contemporaneamente spessore, tipo e colore del bordo diversi:

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

Esempio

Se il colore del bordo non è impostato in border-color - sarà preso dalla proprietà color:

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

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

Vedi anche

la proprietà border-width,
che imposta lo spessore del bordo
la proprietà border-style,
che imposta il tipo di bordo
la proprietà border,
che è una proprietà abbreviata per il bordo