I bordi
CSS consente di decorare gli elementi HTML con dei bordi. Il bordo è parte integrante di ogni elemento, per cui anche se non è presente di base, possiamo aggiungrlo con delle proprietà specifiche. Di ogni bordo possiamo scegliere il colore, lo stile, lo spessore e anche decidere se vogliamo degli angoli più o meno arrotondati. L'attributo di base è sempre border.
<p style="border-style: double; border-color: blue; border-width: 10px; background-color:lightcyan;">Un paragrafo con i doppi bordi</p>
Un paragrafo con i doppi bordi
Stile di un bordo
Esistono diversi stili possibili con cui possiamo sbizzarrirci tramite l'attributo border-style. ATTENZIONE: Questo attributo è obbligatorio. Se non si definisce border-style si sta utilizzando il valore di default, ovvero none che indica l'assenza di bordo.
Gli stili che possiamo applicare sono:
- solid: bordo solido, composto da un'unica riga;
- dotted: bordo composto da puntini (da dot, ovvero punto);
- dashed: bordo composto da trattini (da dash, ovvero tratto);
- double: bordo composto da 2 righe (da double, ovvero doppio);
- groove: bordo interno, dà l'idea di un solco (da groove, ovvero solco);
- ridge: bordo esterno che dà l'idea di un muro (da ridge, ovvero dorsale nel senso di catena montuosa)
- inset: bordo che fa sembrare che l'elemento entri nella pagina;
- outset: bordo che fa sembrare che l'elemento esca dalla pagina;
- none: nessun bordo
Bordo verso l'interno
Bordo verso l'esterno
Dimensione di un bordo
La dimensione del bordo può essere regolata con l'attributo border-width, come negli esempi precedenti degli stili dei bordi. La misura della grandezza può essere espressa in qualsiasi untià consentita (vedi la pagina sulle unità).
Esempio: bordo solido da 3pt
Bordo singolo
Colore di un bordo
Anche il colore del bordo si può personalizzare, attraverso border-color. Le regole per la definizione del colore sono le stesse che si usano nei colori di sfondo e dei testi e sono elencate nella pagina sui colori
Esempio: bordo a puntini verde da 0.3cm
Bordo a puntini verdi
<p style="border-style: dotted; border-width: 0.3cm; border-color: green;">Bordo a puntini verdi</p>
Bordi arrotondati
CSS offre la possibilità di definire anche degli angoli arrotondati con border-radius, una proprietà che va a modificare il raggio (radius) degli angoli. La misura edl raggio può come illustrato per il caso di border-width, essere espressa con qualsiasi unità consentita.
Esempio: bordo arrotondato con 5px
Bordo arrotondato
<p style="border-style: solid; border-width: 3pt; border-color: purple; border-radius: 5px;">Bordo arrotondato</p>
Esempio: bordo arrotondato con 30px
Bordo arrotondato
<p style="border-style: solid; border-width: 3pt; border-color: purple; border-radius: 30px;">Bordo arrotondato</p>
Scorciatoia
Come nel margin e in padding nel box model, esiste una “scorciatoia” anche per le proprietà dei bordi. In particolare, si tratta dell'attributo border con cui si possono definire:
- Lo stile del bordo (obbligatorio)
- La dimensione del bordo
- Il colore del bordo
L'ordine di questi elementi non è fondamentale.
Ad esempio, se vogliamo creare un bordo azzurro da 5px e rientrato:
Bordo rientrato azzurro da 3px