Rounding Border Corners with CSS3

Rounding Border Corners with CSS3

Rounded corners can help soften an otherwise sharp design, but the have been difficult to achieve using images. CSS3 includes a simple method for rounding off one or all of the corners of an elements box: border-radius

Both Mozilla and Webkit have implemented their own versions of border-radius in advance of the final W3C pronouncement, and you need to take these browser extensions into account for the widest interoperability.

To set rounded corners

  1. Add the Webkit, Mozilla, and standard CSS3 border-radius properties
  2. Type a border-radius value, followed by a semicolon, using the same value for all three instances
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Each corner's border radius can be set independently without specifying the other corner radii.

-webkit-border-top-right-radius: 5px;
-moz-border-topright-radius: 5px;
border-top-right-radius: 5px;

This technique is compatably with

Firefox 1 +

Safari 3 +

Crome 1 +


Source: CSS3 visual quickstart guide

comments powered by Disqus