Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

CSS3 rounded corners using the border-radius property

February 7th, 2010

Round corners, without the need of images, is one of the most exciting new features of CSS3. In the past, a web designer would have to use images and tons of code to use rounded corners in their designs. Thanks to the new border-radius property, designers can easily add rounded corners to their layouts.

The border-radius property

The CSS3 code we use to achieve rounded corners requires a different property for Safari and Firefox. At the time of posting this tutorial, it’s a necessary evil we have to live with. In the future, once all browsers support the property, it will become easier. Anyhow, moving on to the CSS3 code required to add rounded corners.

Rounded box example

Rounded Corners using border-radius

The code for the rounded box

.rounded-box {
 background-color: #ccc;
 padding: 10px;
-moz-border-radius: 10px; /* for Firefox */
 text-align: center;
 -webkit-border-radius: 10px; /* for Safari */
}

WebKit is the name of the Mac OS X system framework version of the engine that’s used by Safari. Therefore, any CSS3 we code for Safari will have -wedkit in the property name. Mozilla is the framework Firefox is built on, so any properties using -moz are for Firefox.

The border-radius code explained

• The only CSS3 required for the box is the -webkit-border-radius property, and the -moz-border-radius property. However, I’ve filled out the box with a few additional styles to give it some life.
• I’ve created a class called rounded-box so we can reuse this class on any box element that we would like to have rounded corners.
• -webkit-border-radius: 10px; sets the border radius for each corner to 10 pixels. For corners that are more rounded, increase the pixel value. For less rounded corners, you would decrease the pixel value. The same goes for -moz-border-radius.

Additional radius control

If you would like to apply different values for each corner of your box, you can do so by using the below properties. Why would you want to do this? Perhaps, you would only like rounded corners on the top of your box.

Individual corner radius example

Only Top Corners Rounded

The code for controlling each corner

.rounded-top-box {
 background-color: #ccc;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-bottomleft: 0px;
 -moz-border-radius-bottomright: 0px;
 padding: 10px;
 text-align: center;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -webkit-border-bottom-left-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
}

Make sure you include a value for every corner, even if it’s 0px. If you leave the 0px values out, it will not work!

The individual corner radius code explained

• Note, unlike the original example, we have an individual property for each corner of the box. Therefore, you are able to set a different value for each corner. For this example, I’ve added a radius of 10px to the top two corners.
• I’ve created a new class for this box (rounded-top-box), so it can be used in the same style sheet as the original example with no conflicts.
• The only code required to make this work is the border-radius properties. The other properties have been added to fill out the box.

Degrading for older browsers

We’re still in a time of transition for CSS3 and not all browsers support these new propertiess – Internet Explorer please stand up. Many designers, like myself, have decided to embrace these new CSS3 features while also coding a “best case scenario” alternative for browsers that do not. This alternative is sometimes called graceful degrading. Which basically means, let’s make it look as good as we can in IE6.

Example of a gracefully degraded box

Gracefully degrade for unsupported browsers

As you’ll notice, the above box does not have the rounded corners. It does, however, have all the other characteristics we coded into our original boxes. So the downside is that we lose the rounded corners, but everything else looks the same. The good news is you don’t have to do any additional coding. The styles I added in the above boxes already allow for the degradation. That’s about all I have for rounded corners in CSS3. If you have any questions, please leave them on the comments below.

Tags: border-radius, Code, css3, rounded-corners