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

cssselettore {
  border-color: colore;
}

Numero di valori

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

Esempio

Coloriamo il bordo del blocco in rosso:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Vedi anche