47 consigli e trucchi CSS. #07: Angoli arrotondati – rounded corner

Rounded corners – Angoli arrotondati
Quando css3 è pienamento supportato dal browser, rounded corners sarà semplice così:

.element {border-radius: 5px}
che setta un raggio di 5px su i 4 angoli. per il momento abbiamo bisogno di specifiche css per i browser ed un pò di java script.
In Safari,  Chrome, ed altri webkit browser si usa -webkit-border-radius ed in Firefox ed altri Mozilla browser si usa -moz-border-radius.

.element {
 border-radius: 5px
 -webkit-border-radius: 5px
 -moz-border-radius: 5px
}

Webkit e Mozilla usano diverse sintassi quando si specifica un solo angolo.

.element {
 border-top-left-radius: 5px
 -webkit-border-top-left-radius: 5px
 -moz-border-radius-top-left
}
Per non Webkit e Mozilla browser un piccolo jQuery plugin mimerà la proprietà border-radius.

$(“.element”).corner(“5px”);