CSS3: box con bordi arrotondati

Una delle novità forse più attese del css3 è la possibilità di arrotondare tramite il foglio di stile gli angoli dei nostri div o degli altri tag html.

Uno dei nuovi attributi del css è dunque il border-radius, che poi può essere suddiviso nei 4 angoli: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Inoltre è possibile non solo specificare il raggio del bordo, ma si possono creare ellissi dano il doppio valore per l’asse orizzontale e verticale.

L’esempio che segue presenta bordi ellittici negli angoli a sinistra e circolari a destra:

border-top-left-radius:20px 10px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px 10px;
 border-bottom-right-radius:20px;

Il risultato lo si può vedere in questa pagina