Box con angoli arrotondati con i CSS3

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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, le versioni di Internet Explorer che supportano i CSS3 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;
    border-radius: 30px 30px 30px 30px;
    -o-border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
}
</style>

Il comando di base che utilizziamo è border-radius, seguito dalle versioni del comando compatibili con gli altri vari browser.

Sia il comando di base che il comando -o-border-radius, quindi il comando -moz-border-radius e, in fine, 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.

Nell'esempio proposto, dunque, gli angoli sono tutti stilizzati in egual misura, per cui possiamo risparmiare codice scrivendo semplicemente:

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

Suggerisco di utilizzare la versione con i quattro valori solo nel (raro) caso in cui gli angoli debbano essere di misure differenti tra loro.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (48.995)

:: Referenze dei fogli di stile Css (41.840)

:: Menu ad effetto mouseover con i Css (39.208)

:: Effetti sui link con i Css (29.938)

:: Testo verticale coi Css (19.982)

:: Angoli smussati in un box coi Css (18.915)

:: Box con effetto ombra con i CSS3 (16.291)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.211)

:: Stilizzare i form Html con i Css (15.994)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.733)

IN EVIDENZA
DOWNLOAD