Box con angoli arrotondati con i CSS3

Design di siti Web con HTML e CSS Disegno di siti Web con HTML, CSS e Dynamic HTML.

I CSS3 mettono a disposizione un sistema semplicissimo per la creazione di box con gli angoli arrotondati, attraverso una semplicissima riga di codice.

Prima di passare ad un esempio, c'è da dire che il sistema (nel momento in cui scrivo, luglio 2010) non funziona con Explorer che ancora non si è adeguato al CSS3 Standard, ma funziona con tutti gli altri browser: Firefox, Safari, Chrome, Opera e cosi via.

Vediamo dunque un esempio:

<div id="box">Se non usi Explorer, verdai gli angoli arrotondati!</div>

Stilizziamo il box:

<style type="text/css">
#box
{
    text-align: center;
    background: #CCDDEE;
    padding: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
}
</style>

Sia il comando -moz-border-radius che il comando -webkit-border-radius accettano come valori l'elenco dei pixel a partire da sinistra: se non si vuole impostare il bordo ad uno degli angoli, è sufficiente impostare il valore a 0px.

TAGS - angoli arrotondati, css3