CSS, lo spessore dei bordi con border-width

di Michele Costanzo Commenta

CSS border-width
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.

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>