Ultima famiglia di proprietà attinenti al concetto di Box-model è quella relativa alla gestione dei bordi. Attraverso queste proprietà CSS consente agli sviluppatori una massima libertà creativa essendo possibile, per ciascun bordo, definire:
- spessore
- stile
- colore
Come abbiamo visto per le proprietà padding e margin, anche per i bordi è possibile agire simultanemante su tutti e quattro i lati del box oppure solo su uno specifico lato. Partiamo, questa volta, dall’analisi delle proprietà che consentono di stilizzare i bordi singolarmente.
Queste proprietà sono:
- spessore:
- border-top-width
- border-bottom-width
- border-left-width
- border-right-width
- stile:
- border-top-style
- border-bottom-style
- border-left-style
- border-right-style
- colore:
- border-top-color
- border-bottom-color
- border-left-color
- border-right-color
Le proprietà della famiglia width attendono un valore numerico (con unità di misura) oppure una stringa tra thin (sottile), medium (medio) o thick (spesso).
Le proprietà della famiglia style attendono un valore tra:
- none – nessun bordo;
- hidden – nella pratica equivale a none;
- dotted – bordo a puntini;
- dashed – bordo a trattini;
- solid – bordo con linea intera;
- double – bordo con doppia linea;
- groove – bordo in rilievo (3D);
- ridge – bordo in rilievo (3D) opposto a groove;
- inset – bordo "che rientra" (3D);
- outset – bordo "che esce" (3D) opposto a inset;
Le proprietà della famiglia color, infine, attendono un valore corrispondente ad un colore (solitamente si utilizza la notazione esadecimale per i colori dei bordi oppure parole chiave come "red" o "black"). Altro valore possibile per i bordi è transparent.
Vediamo qualche esempio:
div.box {
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FF0000;
}Nel nostro esempio abbiamo lavorato esclusivamente sul bordo di sinistra specificando, attraverso le tre distinte proprietà, lo spessore, lo stile ed il colore. In realtà, per effettuare questa stilizzazione avremmo potuto utilizzare un’unica proprietà CSS, in questo modo:
div.box {
border-left: 5px solid #FF0000;
}Attraverso la sola proprietà border-left abbiamo specificato, nell’ordine: spessore, stile e colore.
Questa proprietà rientra nel gruppo delle proprietà per la definizione del bordo con sintassi compatta, cioè:
- border-top
- border-bottom
- border-left
- border-right
Definire tutti i bordi con il medesimo stile
Nella maggioranza dei casi pratici non si procede a stilizzazioni differenti per ciascun bordo, ma si applica un medesimo stile alla totalità dei bordi del box. Per fare ciò abbiamo due strade. la prima (prolissa) è la seguente:
div.box {
border-width: 5px;
border-style: solid;
border-color: #FF0000;
}In pratica si utilizzano tre proprietà analoghe a quelle viste prima ma prive del riferimento al lato da stilizzare.
In alternativa (scelta consigliata) si usa la proprietà border la quale consente una sintassi compatta del tipo:
div.box {
border: 5px solid #FF0000;
}Ovviamente questa proprietà sarà da utilizzarsi solo qualora tutti e quattro i bordi del nostro box debbano avere il medesimo aspetto.
