Con la proprietà border-radius di CSS3 possiamo creare dei angoli arrotondati con grande facilità e senza utilizzare immagini o codici javascript. L’utilizzo base della proprietà border-radius è:
1 |
border-radius: 10px; |
Possiamo utilizzare anche la percentuale come unità di misura, per esempio:
1 |
border-radius: 10%; |
E’ necessario specificare gli altri prefissi della proprietà per renderla compatibile con i vari tipi di browser:
1 2 3 |
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; |
Di seguito esempi vari di angoli arrotondati con la proprietà border-radius.
1 – Stesso border-radius per tutti gli angoli
Specificando un solo valore per il border-radius sarà applicato a tutti gli angoli.
1 2 3 4 5 6 7 8 9 10 11 |
#box1{ /*proprietà del contenitore*/ background-color:#7AE840; width: 200px; padding:10px; height:50px /* proprietà border-radius */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } |
Risultato:
2 – Border-radius applicato all’angolo superiore-sinistro e inferiore-destro
La proprietà border-radius accetta anche due valori. In questo caso la proprietà sarà applicata dall’angolo superiore-sinistro al superiore destro e dall’inferiore-destro all’inferiore-sinistro.
1 2 3 4 5 6 7 8 9 10 11 |
#box2{ /*proprietà del contenitore*/ background-color:#7AE840; width: 200px; padding:10px; height:50px /* proprietà border-radius */ -webkit-border-radius: 24px 0; -moz-border-radius: 24px 0; border-radius: 24px 0; } |
Risultato:
3 – Border-radius applicato all’angolo superiore-destro e inferiore-sinistro
In maniera similare, in questo esempio si imposta il border-radius all’angolo superiore-destro e inferiore-sinistro.
1 2 3 4 5 6 7 8 9 10 11 |
#box3{ /*proprietà del contenitore*/ background-color:#7AE840; width: 200px; padding:10px; height:50px /* proprietà border-radius */ -webkit-border-radius: 0 24px; -moz-border-radius: 0 24px; border-radius: 0 24px; } |
Risultato:
4 – Angoli differenti per tutti i lati
1 2 3 4 5 6 7 8 9 10 11 |
#box4{ /*proprietà del contenitore*/ background-color:#7AE840; width: 200px; padding:10px; height:50px /* proprietà border-radius */ -webkit-border-radius: 5px 20px 40px 60px; -moz-border-radius: 5px 20px 40px 60px; border-radius: 5px 20px 40px 60px; } |
Risultato: