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.

Need hosting? Save 50% off your first year of hosting at dreamhost.com with the promo code CARDEO1YEAR

Cardeo Three, a free CSS3 website template

Cardeo Three is a free website template coded using CSS3. Before you get too excited, CSS3 is only supported on a few browsers, like the most recent releases of Firefox and Safari. Here’s a list of some of the CSS3 features in this template:

Cardeo Three CSS3 Template View Demo | Download

NEW CSS3 Features included:

• Rounded Corners (no images!)
• Custom Font Replacement
• Font Shadow

This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Canada License. To view a copy of this license, visit creativecommons.org or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

1. Border Radius: adding rounded corners with CSS
2. Border Image: using an image within a border
3. Box and Text Shadow: adding a shadow to boxes and text
4. Transparency: Controlling transparency with CSS
5. Custom Fonts: Using fonts outside of the regular web system font options
6. The pros and cons of using these new features in your current web design projects
]]> http://www.cardeo.ca/2009/taking-advantage-of-css-3/feed 0