Using the CSS3 Border-Radius Property

There was a time where creating rounded corners on your website required a fair amount of effort. There were a number of different ways to do it, and they all had their own benefits and drawbacks. Thankfully, CSS3 is simplifying the process greatly. Instead of images, nested divs, and unnecessary JavaScript, you can now achieve rounded corners with just a few lines of CSS.

The Basics:

This is an example of what we’re going to do.

The key to rounded corners is the “border-radius” property. This allows you to set the radius in length (pixels or ems) or as a percentage. The border-radius property rounds both the div itself and any border they you’ve applied to it. In the above example, I set a border radius of 15px for all corners:

border-radius: 15px;

While CSS3 is enjoying good support in modern browsers, you should still try to support older browsers as often as possible. Adding -moz-border-radius and -webkit-border-radius will allow older browsers built on both Mozilla (Firefox) and Webkit (Safari, Chrome) to support the corners. We’ll adjust our code as follows:

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

Giving Each Corner a Separate Value:

A rounded rectangle is always nice, but the border-radius property is capable of quite a bit more. For instance, you can assign different values to each corner, or only round certain corners. For example:

In this example, each corner has been assigned a different radius value.

The top-right corner has been given a value of 0, which looks like a traditional corner.

One thing to note is that larger radii may creep into the content of your div (see example above). You may need to adjust padding accordingly.

The code for this is as follows:

border-top-left-radius: 15px;
border-top-right-radius: 0;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 75px;
-moz-border-top-left-radius: 15px;
-moz-border-top-right-radius: 0;
-moz-border-bottom-left-radius: 50px;
-moz-border-bottom-right-radius: 75px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 75px;

Like with all things, you’ll want to make your code as efficient as possible. In this case, you can condense your code into a single statement (plus the two backups for older browsers), the values of which are in the following order: top-left, top-right, bottom-right and bottom-left.
Corners numbered

border-radius: 15px 0 50px 75px;
-moz-border-radius: 15px 0 50px 75px;
-webkit-border-radius: 15px 0 50px 75px;

Separate Horizontal and Vertical Radii:

We can take this one step further, and define different values for the horizontal and vertical radii:

In this example, each corner – with the exception of the top right – has a separate value for the horizontal and vertical radii.

As you can see, by playing with these values, you have a considerable amount of control over how the div will look. With a little effort, you could even create somewhat complex shapes.

The code for this is fairly simple. When defining all corners at once, or when calling out an individual corner, simply separate the values with a space, with the horizontal value first and the vertical value second:

border-radius: 15px 30px;
-moz-border-radius: 15px 30px;
-webkit-border-radius: 15px 30px;

When you’re combining multiple corners into a single statement, separate the two values with a “/”:

border-radius: 15px 0 50px 75px / 30px 0 25px 15px;
-moz-border-radius: 15px 0 50px 75px / 30px 0 25px 15px;
-webkit-border-radius: 15px 0 50px 75px / 30px 0 25px 15px;

The CSS3 border-radius property also works with background images:

Note the rounded image background

Browser Support

Bear in mind, CSS3 is still relatively new, and isn’t completely supported by even the newest browsers. The border-radius property is generally well supported in newer browsers, but will not work for users who are running older browsers. Using the -moz and -webkit prefixes will help support some older browsers, but other users may see rectangular corners.

It’s always a good idea to review the metrics of your website before you implement new techniques. If most of your visitors are on current browsers, you’re probably safe to go ahead. If your user-base still has a significant amount of people running outdated browser, you should test to see whether those browsers will render an acceptable version of your site before moving forward.

One Response to “Using the CSS3 Border-Radius Property”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>