CSS3 border-radius

Border Radius CSS3
Tempo stimato di lettura: 1 minuto, 32 secondi
Pubblicato il 11 gennaio 2012

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;

  1. Top left
  2. Top right
  3. Bottom right
  4. Bottom left

 

 

 

 

– Tre valori: border-radius: 7px 13px 3px;

  1. Top left
  2. Top right + bottom left
  3. Bottom right

 

 

 

 

– Due valori: border-radius: 10px 3px;

  1. Top left + bottom right
  2. Top right + bottom left

 

 

 

 

– Due valori separati dallo slash: border-radius: 10px / 20px;

  1. Raggio orizzontale
  2. Raggio verticale

 

 

 

 

– Un valore: border-radius: 10px;

  1. 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:

http://www.w3.org/TR/css3-background/#border-radius 

  • Davide Sanfilippo

    Veramente interessante, non sapevo quello sul raggio, grazie 😀

Shares