Angoli arrotondati con i CSS3

Finalmente con l’arrivo dei CSS3  è possibile creare elementi con angoli arrotondati! Queste nuove proprietà sono già ampiamente supportate da tutti i browser di nuova generazione e si tratta di una tecnica semplice e molto più comoda che gestire tutto con immagini e porzioni, che restano sempre una valida alternativa. Ma vediamo il codice per arrotondare i bordi con i CSS:

Questo esempio consente di arrotondare di 25 pixel tutti e 4 gli angoli di un elemento <div>. Il codice può essere utilizzato anche su altri elementi del layout, pulsanti, campi, e molto altro ancora..

Clicca qui per vedere un esempio

Ecco il codice CSS:

.test
{
border: solid 1px #999; /* bordo normale (facoltativo) */
border-radius: 25px; /* bordi arrotondati */  
-moz-border-radius: 25px; /* bordi arrotondati vecchie versioni di firefox */
-webkit-border-radius: 25px; /* bordi arrotondati vecchie versioni di opera/safari */
}

Da notare i prefissi “moz” e “webkit” che servono per visualizzare i bordi arrotondati anche nella maggior parte dei browser non compatibili con la proprietà border-radius.

Se un vecchio browser non dovesse supportare gli angoli arrotondati, gli angoli verrebbero visualizzati normalalmente, cioè quadrati, quindi non è necessaria alcuna ulteriore modifica. In alternativa si possono sempre utilizzare delle immagini.

Alternative
Naturalmente è anche possibile creare elementi con angoli arrotondati solo sopra, solo sotto, o solo in nel punto specifico, per farlo basta impostare il valore solo nel punto che si vuole arrotondare. Ecco un esempio con i 2 angoli sopra arrotondati e i 2 sotto squadrati.

.test
{
border: solid 1px #999; /* bordo normale (facoltativo) */
border-radius: 10px 10px 0 0; /* bordi arrotondati */  
-moz-border-radius: 10px 10px 0 0; /* bordi arrotondati vecchie versioni di firefox */
-webkit-border-radius: 10px 10px 0 0; /* bordi arrotondati vecchie versioni di opera/safari */
}

Compatibilità:

browser_ie browser_firefox browser_chrome browser_opera browser_safari

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website