Ecco un div gli angoli arrotondati!

Il nuovo standard CSS versione 3 permette di arrotondare gli angoli di un elemento div -come da esempio. Purtroppo lo standard non è stato ancora messo in pratica da Internet Explorer, ma funziona perfettamente con browser come FireFox e Chrome.

Per fare questo utilizziamo -moz-border-radius e di -webkit-border-radius che accettano come valori ciascun angolo del nostro div. Vediamo un po’ l’HTML dell’esempio:

 
Ecco un div gli angoli arrotondati!

e il relativo CSS:

#roundbox {
    text-align: center;
    background: #CCDDEE;
    padding: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px; /* UPDATE */
}

UPDATE: è stata aggiunta la regola border-radius per il browser Firefox, secondo quanto specificato su caniuse.com

Un po’ di fantasia

Come si può notare, l’esempio qui sotto è un po’ differente: cambiando alcuni valori è possibile creare dei box più eleganti, che magari si adattano meglio allo stile del nostro layout.

Un esempio più simpatico…

Per ottenere questo effetto, modifichiamo il CSS in questo modo:

#roundbox {
    text-align: center;
    background: #CCDDEE;
    padding: 30px 30px 30px 30px;
    -moz-border-radius: 0px 30px 0px 30px;
    -webkit-border-radius: 0px 30px 0px 30px;
    border-radius: 0px 30px 0px 30px; /* UPDATE */
}

UPDATE: è stata aggiunta la regola border-radius per il browser Firefox, secondo quanto specificato su caniuse.com