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:
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:
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:
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:
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.
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:
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:
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.