Il CSS3 ha portato grandi novità nel mondo del web design, che hanno semplificato la vita di noi designer. Oggi volevo mostrarvi come è possibile realizzare dei div con gli angoli arrotondati. Prima dell’avvento del CSS3 per creare questo effetto bisognava usare degli “escamotage” complessi e dispendiosi a livello di tempo.Per creare un div con gli angoli arrotondati adesso è diventato molto semplice, basta inserire il seguente codice nel file .css al punto giusto.

.div_angoli_arrotondati {
 border: 1px solid red;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;}

Questo codice arrotonda di 5px tutti gli ancoli del div con uno spessore di 1px. Specificando è possibile anche arrotondare solamente un lato del div in questo modo.

.div_angoli_arrotondati {
border: 1px solid red;
border-top-right-radius: 5px;}

Il suffisso -moz- serve per indicare al browser Firefox la presenza di angoli arrotondati mentre quello -webkit- serve per indicare tale effetto a browser Safari e Chrome.
Voglio ricordare (come al solito) che questi effetti non vengono supportati da Internet Explorer, ma solamente da Firefox, Chrome e Safari. Per simulare questo effetto su IE bisogna caricare una libreria chiamata PIE e raggiungibile a questo link.

Buon utilizzo.