Border-radius: angoli arrotondati in CSS3
La proprietà css3 border-radius permette di creare angoli arrotondati per gli elementi.
Il suo valore viene specificato in unità di misura o percentuale.
Al momento, il border-radius è applicato solo da Safari3 e Firefox usando i corrispettivi css3: -webkit-border-radius e -moz-border-radius.
Esempio di regola css:
border: 5px solid red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
Sono un elemento con bordo rosso e angoli arrotondati
NB: in questo esempio uso il valore ‘solid’ per la proprietà css ‘border’, gli altri valori come per esempio dotted, double, inset…sono anche validi. (Guarda pagina di prova…)
2 valori possono essere applicati alla proprietà border-radius: una prima per il raggio orizzontale, una seconda per il raggio verticale.
Esempio di regola css:
border: 5px solid red;
-moz-border-radius: 25px 10px;
-webkit-border-radius: 25px 10px;
Sono un elemento con bordo rosso e angoli arrotondati di raggi diversi
NB: Firefox non segue le specifiche applicando il primo valore agli angoli superiore-sinistro/inferiore-destro e il secondo valore
agli angoli superiore-sinistro/inferiore-destro
Se usiamo uno colore di sfondo (background-color) senza specificare uno bordo, lo sfondo dell’elemento avrà lui-stesso angoli arrotondati.
Esempio di regola css:
background-color: #CCCCCC;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
Sono un elemento con uno sfondo grigio e angoli arrotondati
La proprietà border-radius può essere applicato a uno angolo specifico:
- border-top-right-radius per l’angolo superiore destro
- border-bottom-right-radius per l’angolo inferiore destro
- border-top-left-radius per l’angolo superiore sinistro
- border-bottom-left-radius per l’angolo inferiore sinistro
NB: l’equivalente css3 per Firefox sono del tipo: -moz-border-radius-topright, -moz-border-radius-topleft, -moz-border-radius-bottomleft e
-moz-border-radius-bottomright. Mentre per Safari, basta aggiungerci il -webkit davanti.
Esempio di regola css:
border: 5px solid red;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;
Sono un elemento con l’angolo inferiore sinistro arrotondato
Guarda la pagina di prova completa della proprietà css3 border-radius >>
About The Author
giacomo
nell’ultimo div avete scritto angolo superiore destro invece è inferiore destro
Onsitus
Grazie della segnalazione Giacomo!
giacomo
niente! rispondo un po in ritardo ve? xD
Laboratorio Artistico COLORARTE Corsi di disegno e pittura
Ma una proiezione di quando i css3 saranno utilizzabili e visibili da tutti è possibile averla?
Ora analizzando i browser più usati ancora si nota un’utilizzo diffuso di browser ormai obsoleti (es. IE7)