CSS, il colore dei bordi con border-color

di Michele Costanzo Commenta

CSS border-color
Da qualche settimana stiamo analizzando le proprietà dei fogli di stile CSS per la gestione dei bordi. Abbiamo inizialmente visto come le proprietà riferite ai bordi riguardino stile (style), colore (color) e spessore (width) e come possano essere espresse in forma sintetica per tutti i bordi o in forma dettagliata per ognuno dei quattro bordi top (alto), bottom (basso), right (destra) e left (sinistra).

Il colore con border-color

In questa guida in particolare analizzeremo la proprietà border-color che permette di definire il colore che avranno i bordi di un certo elemento di HTML. Se ad esempio volessimo evidenziare con un bordo colorato l’elemento h1 di HTML utilizzeremo un codice CSS di questo tipo:

h1 {
 border-color: #cc6600;
}

La proprietà border-color accetta come valore un qualsiasi colore espresso nelle forme previste dallo standard. Nell’esempio abbiamo utilizzato la rappresentazione esadecimale (#cc6600) ma allo stesso modo potremmo utilizzare i nomi dei colori dello standard VGA o un rappresentazione RGB come abbiamo illustrato nella guida dedicata alla proprietà background-color. Per border-color si può usare anche il valore transparent che rende il bordo trasparente e torna utile quando si vuole garantire che il bordo di un elemento sia invisibile a prescindere da cosa si colloca sullo sfondo.

Colori differenti per i bordi

Esattamente come abbiamo visto per la proprietà border-style, anche la proprietà border-color può essere declinata in modo differente sui quattro lati per avere ad esempio bordi di colori differenti. In questo caso utilizzeremo quindi le proprietà estese border-top-color, border-bottom-color, border-right-color e border-left-color. Avremo quindi codici CSS di questa forma:

h1 {
border-top-color: #cc6600;
border-bottom-color: transparent;
border-right-color: red;
border-left-color: silver;
}