Tra le novità introdotte con i CSS3, vale a dire la nuova versione dei Cascading Style Sheet, merita una menzione la proprietà border-radius che consente di arrotondare i bordi di un box in base ad un determinato raggio.

Fino ad oggi, per ottenere l’effetto di arrotondamento era necessario creare i bordi tramite elementi grafici (tipicamente, gif trasparenti) ed applicare questi ultimi al box interessato come sfondo e/o come contenuto.
Un’ulteriore complicazione era data dal fatto che diventava spesso necessario creare dei div ad hoc proprio per applicare tali sfondi, rendendo più complesso – e semanticamente meno corretto – il mark-up.

Si trattava, in altre parole, di una procedura noiosa e contrastante con l’obiettivo di semplicità e stretta rilevanza semantica del codice ma inevitabile per ottenere l’effetto.

Tutte queste complicazioni sono oggi venute meno grazie alla proprietà border-radius che ha la seguente struttura:

#box {
…
border-radius: 10px;
}

dove il valore 10px si riferisce al raggio di ciascun angolo, nel caso specifico uguale su tutti e quattro gli angoli.

Possono essere definiti fino a quattro valori diversi per i rispettivi angoli, secondo il consueto ordine top-right-bottom-left come segue:

#box {
…
border-radius: 10px 15px 20px 25px;
}

equivalente a:

#box {
…
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 25px;
}

Tornando all’ipotesi in cui il raggio sia uguale in tutti e quattro gli angoli, può essere opportuno in questa fase di “transizione” esprimere la dichiarazione seguendo le rispettive sintassi specifiche per i diversi browser:

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

Un paio di esempio sono pubblicati in questa pagina.

Su Internet sono disponibili dei tools online per generare il codice CSS relativo a questa proprietà, ad esempio: http://border-radius.com per citarne giusto uno.

Il limite nell’utilizzo di questa proprietà è costituito, così come per altre introdotte con i CSS3, dal mancato supporto da parte dei browser meno recenti.
Ad esempio, Internet Explorer supporta la proprietà border-radius a partire dalla versione 9.
Questo significa che quando la pagina viene visualizzata con uno di questi browser, gli angoli non appariranno arrotondati bensì a 90°.
Sono stati messi a punto degli script che rendono questa ed alcune altre proprietà supportate da IE8 e – in alcuni casi – precedenti, sui quali non è opportuno soffermarsi in questo articolo; è comunque ragionevole affermare che la mancata visualizzazione dei bordi arrotondati non compromette la fruibilità del sito ed è quindi accettabile, anche nell’ottica di motivare gli utenti ad aggiornare la versione del proprio programma di navigazione – o meglio ancora a cambiare da IE a Firefox o Chrome.

BIBLIOGRAFIA: “CSS Guida completa” – terza edizione. Gianluca Troiani, APOGEO Editore, 2011 (pagg.80-83)