Arrotondare gli angoli di un div usando i CSS 3

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:

<div id="roundbox">Ecco un <code>div</code> gli angoli arrotondati!</div>

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;
}

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;
}

I commenti:

26-05-2011: Bianca ha scritto:
Ottimo, grazie!

Inserisci un commento:


Il contenuto di questo campo è tenuto riservato e non verrà reso pubblico.

Condividi
Del.icio.us Digg Furl Google Ask
Yahoo! Segnalo Technorati Windows Live Facebook
Smarking Slashdot Taggly Ma.gnolia co.mments

Se ti piace questo articolo, puoi collegarlo al tuo sito copiando il seguente codice HTML nelle tue pagine.

Acquista libri di informatica

Acquista qui il tuo software

Ultimi commenti