Angoli arrotondati CSS3

Con l'ingresso dei CSS 3 è possibile applicare molti effetti. Vediamo un effetto molto carino su come arrotondare i bordi di un elemento
 Solo le ultime versioni dei principali browser supportano la proprietà border-radius di CSS3 che consente di specificare l'angolo di arrotondamento da applicare ai vertici dell'elemento.

Ad esempio lo stile definito di seguito consente di applicare un bordo nero dello spessore di 5 pixel e smussato di 15 pixel:

{codecitation class="brush: css; gutter: false;"}
div#box
 {
     border: 5px solid #000;
     -moz-border-radius: 15px; /* Firefox */
     -webkit-border-radius: 15px; /* Safari, Chrome */
     border-radius: 15px; /* CSS3 standard */
 }
{/codecitation}
Nell'esempio, oltre alla sintassi standard, sono state indicate anche le proprietà specifiche alcuni vendor (Mozilla e WebKit) così da estendere la compatibilità anche con le vecchie versioni di Firefox, Chrome e Safari.
Possiamo diversificare la smussatura di ogni angolo definendo le proprietà border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius e anche applicare un angolo ellittico indicando come valore il rapporto tra asse orizzontale e verticale:
{codecitation class="brush: css; gutter: false;"}
div#box2
{
border: 5px solid #000;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari, Chrome */
border-radius: 20px / 15px; /* raggio orizzontale di 20px e verticale di 10px */
}
{/codecitation}
Potete scaricare un semplice esempio di pagina html usando questo stile