Bordi con i CSS3

La specifica CSS3 è ben lungi dall'essere completata. Molti dei moduli di cui è composta subiscono ancora modifiche anche importanti, ma alcune delle nuove e interessanti funzionalità previste sono ormai da tempo supportate dai principali browser, con l'eccezione di Internet Explorer. Molti sviluppatori, quindi, hanno già iniziato a sfruttare i vantaggi delle nuove proprietà, risolvendo il problema del mancato supporto sul browser di Microsoft con due metodi alternativi:

• Progressive enhancement. Alla base di questo approccio c'è una filosofia di fondo: nella progettazione di un sito o di una pagina "si inizia con la versione di base, poi si aggiungono miglioramenti per gli utenti che hanno dispositivi in grado di gestirli". Se voglio arrotondare gli angoli di un box con i CSS3, lo farò. A Internet Explorer servirò una versione del tutto fruibile, ma con gli angoli squadrati.
• Ricorso a tecniche alternative. Quando si parla di tecniche alternative per ottenere una resa cross-browser, la via più diretta, oggi, è quella di fare ricorso a Javascript. Tornando al caso di prima, se voglio arrotondare gli angoli del mio box anche per Internet Explorer, mi basterà usare una delle tante soluzioni disponibili sotto forma di script, magari basati su un framework come jQuery o MooTools.

A prescindere dai mal di testa a cui ci ha abituati il browser di Microsoft, comunque, per chi si occupa di design e sviluppo per il web, i CSS3 sono tema da tenere d'occhio, non solo perché è bene sapere di cosa si tratta, ma per sfruttarne sin da ora i vantaggi in fase di produzione, su progetti reali.

In questo articolo ci occuperemo dei modi con cui la nuova specifica ha definito il trattamento dei bordi, analizzando due proprietà. Nella prima parte dell'articolo parleremo di border-radius (consente di creare angoli arrotondati), nella seconda di border-image (consente di usare immagini come bordi di un elemento).

border-radius

Attraverso border-radius possiamo arrotondare a nostro piacimento gli angoli di un qualsiasi elemento. Vediamo nei dettagli come la specifica definisce questa funzionalità.

Le proprietà coinvolte sono cinque.

border-top-left-radius

Definisce l'arrotondamento dell'angolo superiore sinistro di un elemento.

I valori possono essere espressi da un numero accompagnato da un'unità di misura o in percentuale.

È possibile definire uno o due valori. Se si definiscono due valori diversi, il primo imposta la misura del raggio orizzontale, il secondo quello del raggio verticale. L'uso di due valori diversi consente di ottenere angoli ellittici. Se si usa un solo valore si applica la stessa dimensione al raggio orizzontale e a quello verticale, ottenendo angoli circolari.

#box {border-top-left-radius: 20px}
#box {border-top-left-radius: 20px 10px}

border-top-right-radius

Definisce l'arrotondamento dell'angolo superiore destro di un elemento.

Per i valori valgono le stesse considerazioni viste in precedenza.

#box {border-top-right-radius: 20px}
#box {border-top-right-radius: 20px 10px}

border-bottom-right-radius

Definisce l'arrotondamento dell'angolo inferiore destro di un elemento.

Per i valori valgono le stesse considerazioni viste in precedenza.

#box {border-bottom-right-radius: 20px}
#box {border-bottm-right-radius: 20px 10px}

border-bottom-left-radius

Definisce l'arrotondamento dell'angolo inferiore sinistro di un elemento.

Per i valori valgono le stesse considerazioni viste in precedenza.

#box {border-bottom-left-radius: 20px}
#box {border-bottom-left-radius: 20px 10px}

border-radius

È una proprietà a sintassi abbreviata (shorthand) con cui è possibile definire con una sola regola i valori di arrotondamento per tutti e quattro gli angoli di un elemento. Per ciascun angolo si possono definire fino a due valori (separati da una slash): il primo per il raggio orizzontale, il secondo per quello verticale.

Il funzionamento di questa proprietà segue il principio comune nei CSS per le proprietà shorthand, lo stesso che ritroviamo nella definizione dei margini o del padding. Dunque, se si imposta un solo valore, esso sarà applicato a tutti e quattro gli angoli; se ne usiamo due, il primo sarà applicato all'angolo superiore sinistro e all'angolo inferiore destro, il secondo all'angolo superiore destro e all'angolo inferiore sinistro, etc. Definendo quattro valori, l'ordine in cui sono applicati parte dall'angolo superiore sinistro e segue il senso orario.

Dunque (esempio 1):

#box {border-radius: 20px}

equivale a:

#box {
border-top-left-radius:     20px;
border-top-right-radius:    20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius:  20px;
}

Ancora:

#box {border-radius: 20px 40px}

equivale a:

#box {
border-top-left-radius:     20px;
border-top-right-radius:    40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius:  40px;
}

Implementazione sui browser

Dopo aver sinteticamente fatto riferimento ai contenuti della specifica, arriviamo ora alla parte pratica.

E partiamo da una fondamentale premessa. Dal momento che i CSS3 non sono ancora uno standard, i produttori di browser ne implementano le proprietà facendo precedere il nome da un prefisso proprietario: -moz- per Firefox/Mozilla, -webkit- per Safari/Chrome/Webkit, -o- per Opera, etc. Se si desidera ottenere una resa cross-browser, dunque, bisognerà prima specificare la proprietà per ciascun browser con il prefisso adatto, ponendo alla fine la regola standard. In questo modo, quando i browser supporteranno la sintassi standard, ci troveremo pronti e non avremo bisogno di ridefinire la regola.

Nel caso di border-radius, c'è da tenere presente che Opera ha implementato la proprietà adeguandosi sin da ora (versione 10.5 alpha) alla specifica, quindi senza fare ricorso al prefisso proprietario.

Chiariamo il tutto con un esempio. Ho un div con id="box" e voglio arrotondare i quattro angoli con un raggio di 20px. Per una resa cross-browser procederò in questo modo:

#box {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

Tutti gli esempi che vedremo nell'articolo seguono questo principio.

Differenze tra Mozilla/Firefox e Safari/Chrome/WebKit

A complicare un po' la situazione interviene un altro fattore. Nella definizione delle proprietà individuali per i singoli quattro angoli, Mozilla/Firefox e Safari/Chrome/WebKit usano prefissi diversi. Safari/Chrome/WebKit aderiscono sostanzialmente alla specifica:

• -webkit-border-top-left-radius per l'angolo superiore sinistro;
• -webkit-border-top-right-radius per l'angolo superiore destro;
• -webkit-border-bottom-right-radius per l'angolo inferiore destro;
• -webkit-border-bottom-left-radius per l'angolo inferiore sinistro;

Su Mozilla/Firefox abbiamo:

• -moz-border-radius-topleft per l'angolo superiore sinistro;
• -moz-border-radius-topright per l'angolo superiore destro;
• -moz-border-radius-bottomright per l'angolo inferiore destro;
• -moz-border-radius-bottomleft per l'angolo inferiore sinistro;

Inoltre, usando la proprietà shorthand border-radius, su Safari/Chrome/WebKit è possibile usare solo un valore, assegnando così lo stesso raggio a tutti gli angoli. In pratica, il codice che segue (esempio 2) non funziona su Safari e Chrome, mentre su Firefox e Opera, correttamente, vengono definiti raggi diversi per ciascuno degli angoli:

-moz-border-radius: 20px 10px 30px 40px;
-webkit-border-radius: 20px 10px 30px 40px;
border-radius: 20px 10px 30px 40px;

Se vogliamo ottenere su Safari e Chrome quattro angoli con raggi diversi, bisognerà ricorrere alle proprietà individuali (esempio 3):

-moz-border-radius: 20px 10px 30px 40px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
border-radius: 20px 10px 30px 40px;

Sempre relativamente alla proprietà shorthand border-radius, c'è da aggiungere che Safari/Chrome/WebKit non si adeguano alla specifica su un altro punto.

Come si accennava sopra, usando border-radius, per ciascun angolo si possono definire fino a due valori (separati da una slash): il primo per il raggio orizzontale, il secondo per quello verticale. Ma Safari/Chrome/WebKit non onorano questo comportamento previsto. Vediamo l'esempio 4 e il codice usato:

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 20px / 10px;

Seguendo quanto previsto dalla specifica, questa regola significa: assegna a ciascun angolo un raggio orizzontale di 20px e uno verticale di 10px per ottenere quattro angoli ellittici. Se visualizzate l'esempio con Firefox 3.5/3.6 o con Opera 10.5, è esattamente quello che vedrete. Se lo visualizzate con Safari o Chrome, gli angoli appariranno squadrati.

In realtà, ai due browser basati su WebKit non piace la slash. E infatti, per ottenere quanto desideriamo basta eliminarla, ma solo dalla regola per WebKit. Ecco l'esempio 5 e il codice:

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px 10px;
border-radius: 20px / 10px;

Chiudiamo questa sezione con una tabella riassuntiva del supporto per la proprietà border-radiussui vari browser:



Non supportata	Firefox 3.0 e versioni successive (*)	Safari 3.1 e versioni successive	Chrome 1.0 e versioni successive	Opera 10.5

Nota: Firefox supporta gli angoli ellittici solo a partire dalla versione 3.5.

Esempi

Per concludere, ecco una carrellata di esempi che mostrano la proprietà in azione. Il codice degli esempi è fatto per ottenere la compatibilità cross-browser e tiene conto di tutte le indicazioni contenute nella prima sezione dell'articolo.

Arrotondare solo un angolo

È sufficiente usare la proprietà individuale per l'angolo da arrotondare, nel nostro caso quello superiore sinistro (esempio 6):

-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-top-left-radius: 20px;

Arrotondamento ellittico su un solo angolo

Esempio 7:

-moz-border-radius-topleft: 40px 20px;
-webkit-border-top-left-radius: 40px 20px;
border-top-left-radius: 40px 20px;

Arrotondare i due angoli superiori

Esempio 8:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;

Arrotondare due angoli opposti

Esempio 9:

-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;

Arrotondare due angoli opposti con raggi diversi

Esempio 10:

-moz-border-radius: 20px 60px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 60px;
border-radius: 20px 60px;

Arrotondare quattro angoli con valori diversi

Esempio 11:

-moz-border-radius: 20px 60px 10px 40px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 40px;
border-radius: 20px 60px 10px 40px;

Tutti gli esempi sono disponibili per il download.

border-image

Insieme a border-radius, la seconda novità rilevante introdotta dalla specifica CSS3 rispetto alla definizione di bordi riguarda la proprietà border-image. Attraverso border-image è possibile assegnare delle immagini ai quattro bordi di un elemento.

L'idea è sicuramente buona, potenzialmente molto utile in tutti quei casi in cui si vogliano creare dei box particolarmente estrosi che ospitino testo o immagini al loro interno. Il problema è che l'implementazione definita nella specifica non è certo tra le più intuitive. A ciò si aggiunga che negli ultimi mesi la specifica stessa ha subito modifiche sostanziali, per cui al momento i rendering engine dei browser che gestiscono border-image supportano qualcosa che non esiste più nei documenti del W3C (si veda sulla questione questa pagina del Developer Center di Mozilla).

In attesa che lo scenario assuma contorni più chiari, tali da consentire un uso della proprietà che vada oltre il puro e semplice esperimento, vediamo in sintesi il meccanismo di funzionamento di border-image, partendo però dalla tabella di supporto dei browser:



Non supportata	Firefox 3.5 e versioni successive (*)	Safari 3.1 e versioni successive	Chrome 2.0 e versioni successive	Opera 10.5

Come per border-radius, Firefox usa il prefisso -moz-, Safari e Chrome il prefisso -webkit-, Opera supporta invece la proprietà nella sua forma standard, senza prefissi proprietari.

Come funziona

Partiremo da un esempio. Il codice che segue è relativo al riquadro indicato come 'Box 1':

#border {
 width: 200px;
 padding: 10px;
 border: 27px solid black;
 -webkit-border-image: url(border.png) 27 27 27 27 round round;
 -moz-border-image: url(border.png) 27 27 27 27 round round;
 border-image: url(border.png) 27 27 27 27 round round;
}

Le regole per larghezza e padding non hanno influenza sui bordi.

La parte che ci interessa inizia con la regola border: 27px solid black. Quando si usa border-image, infatti, bisogna sempre e comunque definire una larghezza per il bordo dell'elemento tramite la consueta proprietà border. Innanzitutto perché tale dichiarazione influenza l'applicazione delle immagini ai bordi con border-image; secondariamente perché così facendo offriamo un'alternativa per i browser che non supportano la proprietà: chi usa IE, quindi, vedrà intorno al box con id border un bordo solido e nero dello spessore di 27px su tutti e quattro i lati.

Osserviamo ora in che modo si definisce border-image. La dichiarazione di divide in tre parti.

La prima parte contiene l'URI dell'immagine da usare per i quattro bordi. Nell'esempio abbiamo usato, prendendola a prestito dal sito CSS3.info, questa immagine PNG:

La seconda parte è composta da quattro valori numerici senza unità di misura (in alternativa si possono usare delle percentuali): 27 27 27 27. Si noti come il valore 27 corrisponda ai 27px definiti per la larghezza del bordo. Come vanno interpretati quei quattro 27?

Quando si usa un'immagine con border-image essa viene suddivisa in una griglia composta di nove sezioni. Quattro angoli (1, 3, 9, 7 in senso orario), quattro lati (2, 6, 8, 4, sempre in senso orario), una sezione centrale (5).

Semplificando al massimo possiamo dire che, nell'ordine, i quattro 27 stabiliscono quali parti/aree dell'immagine usare sul box nelle posizioni 1, 3, 9, 7, ovvero i quattro angoli. Il primo 27 significa: "Usa per l'angolo superiore sinistro (1) la parte corrispondente dell'immagine alta 27px". Il secondo 27: "Usa per l'angolo superiore destro (3) la parte corrispondente dell'immagine larga 27px". Il terzo 27: "Usa per l'angolo inferiore destro (9) la parte corrispondente dell'immagine alta 27px". Il quarto 27: "Usa per l'angolo inferiore sinistro (7) la parte corrispondente dell'immagine larga 27px".

Complicato? Così è purtroppo il meccanismo proposto dal W3C. Ma andiamo avanti.

La terza parte della dichiarazione comprende due parole chiave: round round.

Il primo round definisce il comportamento dell'immagine sui lati superiore, inferiore e centrale, in senso orizzontale (sono le sezioni 2 5 e 8 della griglia). Il secondo round opera sulle sezioni 4, 5 e 6, in senso verticale. round significa che quella parte dell'immagine va ripetuta, un po' come avviene con gli sfondi quando usiamo repeat-x e repeat-y. Se si rivede l'esempio (box 1) dovrebbe risultare tutto più chiaro: si noti come il piccolo rombo giallo venga ripetuto sui quattro lati.

In alternativa a round, si può usare la parola chiave stretch, come abbiamo fatto nell'esempio con il box 2. Ecco il codice:

#border2 {
 width: 200px;
 padding: 10px;
 border: 27px solid black;
 -webkit-border-image: url(border.png) 27 27 27 27 stretch stretch;
 -moz-border-image: url(border.png) 27 27 27 27 stretch stretch;
 border-image: url(border.png) 27 27 27 27 stretch stretch;
}

La differenza tra round e stretch è evidente. Con stretch quella parte di immagine (per noi il piccolo rombo giallo) viene estesa (diremmo stirata) in larghezza o altezza fino a riempire lo spazio.

Questo è il punto in cui la specifica è stata recentemente cambiata. La parola chiave round è stata eliminata e sostituita da repeat, altre parole chiave e comportamenti sono stati aggiunti, ma i browser supportano ancora la vecchia definizione.

Tutto sarà probabilmente più semplice per chi scrive codice CSS nel momento in cui i browser supporteranno le sotto-proprietà di border-imege già previste nella specifica (per esempio: border-top-image, border-right-image, border-bottom-image, border-left-image, etc). In questo modo, potendo cioè definire con una regola ad hoc l'immagine per un lato specifico, si avrà senz'altro un controlo maggiore sull'effetto finale. Purtroppo, al momento, ad essere supportata è solo la proprietà shorthand border-image con le complicazioni già viste.

Prima di concludere una serie di link ad articoli di approfondimento da cui trarre spunto anche per applicazioni creative:

• Border Image using CSS3
• Awesome Overlays - Demoing a practical application of the CSS3 border-image property
• Guide to using CSS3 border image
• border-image in Firefox
• border-image demonstration page
• A Solution to Some Border-Image Problems

Il codice dell'esempio visto nell'articolo è disponibile per il download.