When CSS3 is fully supported across browsers rounded corners will be as simple as:
.element {border-radius: 5px}
which will set a 5px radius on all 4 corners. For now we need some browser specific CSS combined with a little JavaScript to make this work in all browsers.
In Safari, Chrome, and other webkit browsers we use -webkit-border-radius and in Firefox and other Mozilla based browsers we use -moz-border-radius.
.element {
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
}
Webkit and Mozilla use different syntax when specifying one corner.
.element {
border-top-left-radius: 5px
-webkit-border-top-left-radius: 5px
-moz-border-radius-top-left
}
For non Webkit and Mozilla browsers a little jQuery plugin will mimic the border-radius property.
$(“.element”).corner(“5px”);
The jQuery corner plugin allows for more than setting the radius of the corner. You can also set the corner to show as a number of other patterns.