Concludiamo la guida ai bordi nei fogli di stile CSS esaminando la proprietà border-width che come si può facilmente intuire definire lo spessore del bordo. Ricordiamo che nelle precedenti guide abbiamo già analizzato le proprietà border-style (stile del bordo) e border-color (colore del bordo).
La proprietà border-width
La proprietà border-width definisce lo spessore del bordo quando questo è uniforme su tutti e quattro i lati dell’elemento a cui la proprietà si riferisce. Supponendo ad esempio di voler applicare un bordo all’elemento h1 di HTML utilizzeremo un codice CSS di questo tipo:
h1 {
border-style: solid;
border-width: 2px;
}
Osserviamo anzitutto che nella maggior parte dei casi la proprietà border-width deve essere associata alla proprietà border-style in quanto da sola non è sufficiente a definire un bordo. Nel codice dell’esempio al bordo è stato assegnato un valore in pixel (px) ma più in generale sarà possibile utilizzare tutte le unità di misura riconosciute nei fogli di stile (pt, cm, in, mm, pc, em, ex).
La proprietà border-width accetta anche tre valori testuali denominati thin, medium e thick che definiscono in maniera più generica una linea di bordo sottile, media e intensa).
Spessore dei bordi variabile
Come abbiamo visto per le altre proprietà dei fogli di stile CSS relative ai bordi, anche la proprietà border-width può essere declinata in versioni differenti per i quattro lati dando vita ad quattro proprietà indipendneti:
- border-top-width (bordo superiore)
- border-right-width (bordo destro)
- border-bottom-width (bordo inferiore)
- border-left-width (bordo sinistro)
Il comportamento di queste proprietà è analogo a border-width con il vantaggio di poter differenziare lo spessore dei bordi tra i quattro lati.