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