DIV con angoli arrotondati solo con CSS

Sino a poco tempo fa, ottenere un box con angoli arrotondati non era così semplice e comunque di cattiva gestione nel momento in cui il contenuto cambiava.

In origine si utilizzavano tabelle annidate e piccole gif graficamente arrotondate.

In seguito le immagini potevano essere inserite di sfondo ai  DIV tramite CSS, generando comunque non poco codice di cattiva gestione.

Oggi, la soluzione migliore cross-browser è questa:

<div class=”esempio”> contenuto </div>

.esempio {

/*angolo superiore sinistro*/
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;

/*angolo superiore destro*/
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;

/*angolo inferiore sinistro*/
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;

/*angolo inferiore destro*/
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;

}

ecco fatto, compatibile con tutti i browser ad esclusione di IE 5 ormai in disuso.