Border e outline: gestire i bordi con i CSS

La definizione dei bordi con i CSS può risultare a prima vista un po' intricata per il numero di proprietà coinvolte: se infatti consentono all'autore la massima flessibilità, rendono a volte complicata la gestione del codice.

CSS border: le proprietà

In linea di massima possiamo suddividere le proprietà relative ai bordi in due categorie: proprietà singole e proprietà a sintassi abbreviata. Le prime definiscono singoli aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni.

Sono proprietà singole:

border-top-color, border-top-style, border-top-width, border-bottom-color,
border-bottom-style, border-bottom-width, border-right-color, border-right-style,
border-right-width, border-left-color, border-left-style, border-left-width

Sono proprietà a sintassi abbreviata:

border, border-bottom, border-top, border-right, border-left, border-color,
border-style, border-width

Definire il CSS per un singolo bordo

Iniziamo a vedere come impostare le proprietà per un singolo bordo. Questa la sintassi di base con le proprietà singole:

selettore {
border-<lato>-color: <valore>;
border-<lato>-style: <valore>;
border-<lato>-width: <valore>;
}

E questa la sintassi abbreviata:

selettore {
border-<lato>: <valore width>
<valore style>
<valore color>;
}

In entrambi gli esempi di sintassi sostituite a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left.

Per quanto concerne i valori, come si vede dall'elenco delle proprietà, di ciascun lato si possono definire per il bordo tre aspetti:

1. il colore (color);
2. lo stile (style);
3. lo spessore (width).

I valori possibili per il colore sono:

• un qualsiasi colore;
• la parola chiave inherit.

Il colore può essere espresso in uno qualunque dei modi presentati nella lezione sulla gestione dei colori. Se non si imposta un valore specifico, il colore sarà quello di primo piano impostato con la proprietà color.

Stili per border style nel CSS

Lo stile di un bordo può invece essere espresso con una delle seguenti parole chiave:

Stile bordo	Descrizione
none	l'elemento non presenta alcun bordo e lo spessore equivale a 0
hidden	equivalente a none
dotted	bordo a puntini
dashed	bordo a lineette
solid	bordo solido e continuo
double	bordo solido, continuo e doppio
groove	tipo di bordo in rilievo
ridge	altro tipo di bordo in rilievo
inset	effetto 'incastonato'
outset	effetto 'sbalzato'

Ciascuna definisce un particolare aspetto del bordo.

Esempio.

Infine abbiamo lo spessore. Esso può essere modificato secondo i seguenti valori:

• un valore numerico con unità di misura;
• thin: bordo sottile;
• medium: bordo di spessore medio;
• thick: bordo di spessore largo.

Nel caso delle parole chiave la dimensione esatta non è specificata dal linguaggio.

Come scrivere, dunque, una regola per impostare uno solo dei bordi? Si può fare così, usando le proprietà singole:

div {
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
}

Ma è molto più comodo scrivere così, facendo ricorso alla proprietà a sintassi abbreviata:

div {border-left: 1px solid black;}

Definire stili per tutti e quattro i bordi

Se si vogliono impostare stili per tutti e quattro i bordi del box, si hanno ancora una volta due opzioni. La prima è da usare quando si vogliono impostare insieme i quattro bordi ma si vuole assegnare a ciascuno uno stile diverso in quanto a colore, spessore, stile:

selettore {
border-width: <valori>;
border-style: <valori>;
border-color: <valori>;
}

I valori possibili sono quelli visti prima a proposito del colore, dello stile e dello spessore.

Per ciascuna di queste proprietà è possibile definire da uno a quattro valori, uno per lato. Se ne usiamo quattro l'ordine di lettura è questo: top, right, bottom, left. Se invece ne impostiamo uno, due o tre valgono le stesse regole viste per i margini nella lezione 16.

Ecco un snippet di codice:

div {
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red;
}

Usare la proprietà CSS border

L'ultima proprietà a sintassi abbreviata è border. Con essa possiamo definire con una sola regola le impostazioni per i quattro bordi. Il suo uso è però limitato a un solo caso, peraltro molto comune: che i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore.

Questa la sintassi:

selettore {
border: <valore spessore>
<valore stile>
<valore colore>;
}

Che tradotto in codice reale diventa:

div {border: 2px solid black;}

Esempio.

La proprietà outline

Inseriamo qui la trattazione per la proprietà outline perché è concettualmente legata ai bordi.

La cosiddetta 'outline' è infatti una sorta di bordo che è possibile inserire attorno ad oggetti di un documento per evidenziarli. Se impostata, l'outline si colloca esternamente rispetto al bordo definito per l'elemento.

È possibile definire l'aspetto dell'outline secondo le seguenti proprietà:

outline-color

• il colore

outline-style

lo stile
• outline-width: lo spessore.

La proprietà outline è una proprietà a sintassi abbreviata con cui si possono definire in una sola regola tutti gli aspetti toccati dalle proprietà singole.

Sintassi ed esempi

selettore {outline: valore spessore,
valore stile, valore colore;}

I valori possibili sono identici a quelli visti per i bordi, compresa la keyword none, che ha l'effetto di eliminare del tutto l'outline.

Paradossalmente, l'utilizzo più comune in un foglio di stile per questa proprietà è quello che consente di... eliminarla!

I browser web implementano tutti, nativamente, un meccanismo per cui, quando i campi di un form ricevono il focus, viene visualizzata appunto l'outline.

Per eliminarla basterà una regola siffatta:

input, select,
textarea, button {
outline: none;
}

Esempio.

Approfondimenti CSS3

• Bordi con angoli arrotondati: border-radius