Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca agli utenti di browser moderni. Una novità che sta prendendo decisamente piede dopo questi ultimi cambiamenti è il border radius.

Prima per arrotondare immagini e div utilizzavamo immagini (spesso utilizzate come sfondo) realizzate attraverso i programmi di grafica, ora invece non ce n’è più bisogno, bastano poche righe di codice per ottenere il medesimo risultato, ossia smussare gli angoli.

Come arrotondare gli angoli di un div (ma anche di una img)? Appunto attraverso la proprietà border-radius, costruita pensando anche ai browser più datati.

#nomeDiv {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

Nell’ordine si parla dell’angolo in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.

Questo invece è ciò che succede se il raggio del border radius è identico per i quattro angoli:

#nomeDiv {
border-radius: 5px;
}

Per quanto riguarda la compatibilità del border radius con i vari browser Opera 10,5 e Internet Explorer 9 non necessitano di una proprietà con prefisso. Firefox e Safari invece necessitano di una piccola accortezza, per cui il codice diviene questo:

#nomeDiv {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Il tool online per il Border Radius

Questo è ciò che riguarda la teoria. Conoscerla è sempre importante anche se ormai online c’è un tool per ogni cosa. A voi pigroni quindi consiglio un sito dedicato che fa il lavoro sporco al posto vostro. Come si chiama il sito? Indovinate un po’? Border-radius.