Rounded Corners

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.