Proprietà border-color CSS

Definizione e uso

L'attributo border-color imposta i colori dei quattro bordi. Questo attributo può impostare da 1 a 4 colori.

L'attributo border-color è un attributo abbreviato che può impostare il colore di parte visibile di tutti i bordi di un elemento, o impostare colori diversi per ciascuno dei 4 lati. Vedi l'esempio seguente:

Esempio 1

border-color:red green blue pink;
  • Il bordo superiore è rosso
  • Il margine destro è verde
  • Il bordo inferiore è blu
  • Il bordo sinistro è rosa

Esempio 2

border-color:red green blue;
  • Il bordo superiore è rosso
  • Il bordo destro e il bordo sinistro sono verdi
  • Il bordo inferiore è blu

Esempio 3

border-color:dotted red green;
  • Il bordo superiore e il bordo inferiore sono rossi
  • Il bordo destro e il bordo sinistro sono verdi

Esempio 4

border-color:red;
  • Tutti e 4 i bordi sono rossi

Ricorda, lo stile del bordo non può essere none o hidden, altrimenti il bordo non apparirà.

Nota:Si dovrebbe sempre dichiarare l'attributo border-style prima di border-color. L'elemento deve ottenere il bordo prima di cambiare il suo colore.

Vedi anche:

Tutorial CSS:Margine CSS

Manuale di riferimento HTML DOM:Attributo borderColor

Esempio

Impostare i colori dei 4 bordi:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Prova tu stesso

Sintassi CSS

border-color: color|transparent|initial|inherit;

Valore dell'attributo

Valore Descrizione
color_name Si stabilisce che il colore del bordo sia un nome di colore (ad esempio red).
hex_number Si stabilisce che il colore del bordo sia un valore esadecimale (ad esempio #ff0000).
rgb_number Si stabilisce che il colore del bordo sia una codifica rgb (ad esempio rgb(255,0,0)).
transparent Valore predefinito. Il colore del bordo è trasparente.
inherit Si stabilisce che l'attributo debba ereditare il colore del bordo dal elemento genitore.

Dettagli tecnici

Valore predefinito: non specificato
Ereditarietà: no
Versione: CSS1
Sintassi JavaScript: object.style.borderColor="#FF0000 blue"

Altri esempi

Impostare i colori dei quattro bordi
Questo esempio dimostra come impostare i colori dei quattro bordi. È possibile impostare da uno a quattro colori.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Nota:Internet Explorer 6 (e versioni precedenti) non supporta il valore dell'attributo "transparent".

Nota:I browser IE7 e precedenti non supportano il valore "inherit". IE8 richiede !DOCTYPE. IE9 supporta "inherit".