ZANETTE
MARCO
CSS
Angoli arrotondati con i css3
Grazie alle nuove proprietà introdotte dai css di terza generazione (css3) è possibile creare dei box con gli
angoli arrotondati, sfruttando la nuova proprietà border-radius.
Attraverso border-radius è possibile creare degli angoli arrotondati "regolari" applicando un valore,
oppure angoli arrotondati con un raggio orizzontale ed uno verticale diversi applicando 2 vaolori.
Riporto sotto degli esempi.
- <div style="display:block; width:150px; height:150px; background-color:#F00; border-radius:20px;">
- </div>
In questo esempio ho creato un div con angoli arrotondati con un raggio di 20px
(border-radius:20px).
Qui sotto un'esempio con angoli arrotondati di raggio verticale e orizzontale diversi.
- <div style="display:block; width:150px; height:150px; background-color:#F00; border-radius:20px / 10px;">
- </div>
In questo esempio invece ho creato un box con angoli arrotondati di raggio verticale e orizzontale diverso,
rispettivamente di 20px e 10px (border-radius:20px / 10px).
In questi primi 2 casi ho applicato la proprietà a tutti e 4 gli angoli, naturalmente è possbile applicare questa proprietà
solo agli angoli che desideriamo; vediamo in quest'ultimo esempio come fare.
- <div style="display:block; width:150px; height:150px; background-color:#F00; border-top-right-radius:20px 10px;">
- </div>
In questo caso ho applicato la proprietà border-radius solo all'angolo destro in alto attraverso la dicitura
border-top-right-radius.
Da notare che quando applichiamo la proprietà ad un angolo specifico, come in questo esempio, per definire valori diversi
per il raggio orizzontale e verticale non bisogna separare i valori con il caratter "/" ma semplicemente
fare uno spazio tra essi (border-top-right-radius:20px 10px).
Ricordo inoltre che la proprietà border-radius in Internet Explorer è supportata solo dalla versione 9.