{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

CSS Rounded Corners Tutorial

CSS allows you to create rounded corners without using images. This is can be done by using the border-radius property which is specified in the next W3C specification of CSS (CSS3).

View this web page to see an example of CSS3 rounded corners: CSS3 Rounded Corners Example.

Browser Compatibility
border-radius Properties

border-radius Properties Syntax
border-radius Properties Examples

Browser Compatibility

The web browsers and the particular versions of web browsers that support CSS3 rounded corners are: Internet Explorer 9, Firefox, Chrome, Opera Safari.

The web browsers that do not support the border-radius property are Internet Explorer versions 6, 7 and 8.

Firefox also supports the border-radius property, however, you need to add the "-moz-" prefix to the border-radius property for now.

border-radius Properties

The border-radius properties as specified by the W3C are listed below.

border-radius	Sets the radius of the for corners in one declaration
border-top-left-radius	Sets the border radius of the top left corner
border-top-right-radius	sets the border radius of the top right corner
border-bottom-right-radius	Sets the border radius of the bottom right corner
border-bottom-left-radius	Sets the border radius of the bottom left corner

The border radius properties specified by Firefox are listed below.

-moz-border-radius	Sets the border radius of the four corners in Firefox web browsers
-moz-border-radius-topleft	Sets the border radius of the top/left corner in Firefox web browsers
-moz-border-radius-topright	Sets the border radius of the top/right corner in Firefox web browsers
-moz-border-radius-bottomright	Sets the border radius of the bottom/right corner in Firefox web browsers
-moz-border-radius-bottomleft	Sets the border radius of the bottom/left corner in Firefox web browsers

border-radius Properties Syntax

The syntax for the border-properties is shown below.

.selector { border-(top/bottom)-(right/left)-radius: [ <length> | <%> ] [ <length> | <%> ]; }

You can set the roundness off all of the four corners in one declaration or you can set the roundness of each corner independently.

The border-radius properties can each accept either one or two sets of values, where each value within each set of values are expressed as a length value(s) or a percentage value(s). Each set of values can have from one to four values.

If there is one set of values, they define both the horizontal and vertical radii of all four corners (or individual corner) equally.

If there are two sets of values, the first set of values define the horizontal radii for all four corners (or individual corners). The second set of values define the vertical radii of all four corners (or individual corners).

If a set of values has only one value, that value defines the radii of all four corners.

If a set of values has four values, the values define radii of the top/left, top/right, bottom/right and bottom/left corners, respectively.

border-radius Properties Examples

The code example below shows you how to set all of the four corners in one declaration only one set of one values and that set of values only has one value.

.border { border-radius:10px; -moz-border-radius:10px; /* for Firefox */ }

The code example below shows you how to set the top/right corner radius using two sets of values. The first and second set of values each have one percentage value.

.border { border-top-right-radius:25% / 50%; -moz-border-radius-topright:25% / 50%; /* for Firefox */ }

The code example below shows you how to set the border radius of all four corners in one declaration using two sets of values. Each set of values has four values.

.border { border-radius:5px 10px 20px 30px / 5px 10px 20px 30px; -moz-border-radius: 5px 10px 20px 30px / 5px 10px 20px 30px; /* for Firefox */ }

The code example below shows you how to set the border radius of all four corners in one declaration using two sets of values. The first set of values has two values. The second set of values has only one value.

.border { border-radius:10px 20px / 15px; -moz-border-radius:10px 20px / 15px; /* for Firefox */ }

The code example below shows you how to set the border radius of all four corners in one declaration using two sets of values. The first set of values has two length values. The second set of values has one percentage value.

.border { border-radius:10px 20px / 50%; -moz-border-radius:10px 20px / 50%; /* for Firefox */ }