I fogli di stile CSS consentono di associare ad ogni selettore dei bordi; questi ultimi possono essere utilizzati per dare maggiore risalto o riconoscibilità ad una sezione del documento HTML. Graficamente il browser rappresenta un bordo sotto forma di una cornice che racchiude su uno o più lati un dato elemento.
Gestione dei bordi nei CSS
La gestione dei bordi attraverso i fogli di stile CSS avviene utilizzano tre tipi di proprietà che definiscono stile (style), colore (color) e spessore (width) del bordo. Per offrire il massimo grado di personalizzazione nei fogli di stile i bordi possono essere rappresentati con:
- proprietà sintetiche: il cui valore si applica in maniera identica su tutti i quattro lati del bordo.
- proprietà estese: il cui valore si applica ad un singolo lato del bordo. In questa proprietà si utilizzeranno le parole top, bottom, right e left per indicare rispettivamente il lato superiore, inferiore, destro e sinistro del bordo. L’uso di proprietà estese consente evidentemente di definire un bordo con caratteristiche diverse su ciascuno dei quattro lati.
Un primo esempio
Nelle prossime settimane dedicheremo alcune guide dettagliate all’uso dei bordi nei fogli di stile. Per ora però consideriamo un primo esempio introduttivo per comprendere l’uso generale delle proprietà legate ai bordi. Supponiamo di voler definire un bordo per l’elemento H1 di HTML. Per avere un bordo comune su tutti i quattro lati utilizzeremo un codice CSS di questo tipo:
h1 {
border-style: solid;
}
Volendo invece differenziare i bordi sui quattro lati dovremo utilizzare le proprietà estese con una codice di questo tipo:
h1 {
border-bottom-style: solid;
border-top-style: dashed;
}
Come si può notare nell’esempio sono stati definiti solo i bordi superiore (top) ed inferiore (bottom) e si sono impiegati due diversi stili (solid e dashed).