I Css3 negli ultimi tempi stanno prendendo sempre più piede, anche se molti browser non riescono a leggerli, poichè non esiste ancora uno standard definitivo. Fortunatamente ci sono alcuni browser moderni (Internet Explorer 9, Firefox 4, Safari 5, Chrome 4.0+, Opera 10.5+) che leggono perfettamente quasi tutte le proprietà, perciò credo che valga la pena utilizzarle (sempre in maniera adeguata). In questo articolo voglio parlare in particolare della proprietà border-radius che consente di creare degli angoli tondi senza DIV annidati e soprattutto senza l’utilizzo di immagini.
Descrizione generale della proprietà
border-radius: 10px;
Andiamo ora a capire nel dettaglio tutti i valori che possiamo specificare:
Esempi
– Quattro valori: border-radius: 5px 9px 3px 15px;
- Top left
- Top right
- Bottom right
- Bottom left
– Tre valori: border-radius: 7px 13px 3px;
- Top left
- Top right + bottom left
- Bottom right
– Due valori: border-radius: 10px 3px;
- Top left + bottom right
- Top right + bottom left
– Due valori separati dallo slash: border-radius: 10px / 20px;
- Raggio orizzontale
- Raggio verticale
– Un valore: border-radius: 10px;
- Tutti e quattro gli angoli uguali
Problemi di compatibilità cross-browsers
Purtroppo, non esiste ancora uno standard definitivamente approvato e quindi ci sono ancora un po’ di problemi di compatibilità fra i vari browser. Ad esempio Firefox richiede il prefisso -moz- prima della regola e anche altri browser richiedono specifiche particolari. Nonostante i browser si stiano adeguando verso una completa standardizzazione, per scrivere del codice che sia compatibile con tutti i browser dobbiamo aggiungere qualche specifica:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
Aggiungendo queste specifiche potremmo utilizzare tale proprietà sulla maggior parte dei browser, essendo più o meno sicuri che i bordi tondi si vedano perfettamente. Tutte le specifiche Css3 le trovate a questo link:
