Come creare in un attimo angoli arrotondati con CSS3

 

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 è:

Possiamo utilizzare anche la percentuale come unità di misura, per esempio:

E’ necessario specificare gli altri prefissi della proprietà per renderla compatibile con i vari tipi di browser:

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.

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.

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.

Risultato:

 

4 – Angoli differenti per tutti i lati

Risultato:

 

Proprietà testata su Safari 5 | FF 3.6 | Opera 11 | Chrome 8 | IE 9

pixolo ads
Cambia Copertina
2536 | Articolo pubblicato 6 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×