Rounded corners every which way

In this tutorial I will show you how to enhance your website with rounded corners using the best practices in the industry. There are three common ways to make rounded corners. There are other variations each with pros and cons of their own, but they all lean on these three.

Method one: CSS3 = future

Web design and development is about to take a huge leap with the arrival of Windows 7, Safari 4, Firefox 3.6 and Google Chrome Frame. New and exciting web standards like CSS3 and HTML5 are beginning to creep into the browser market. This is due in large part to the web design community, web standards activists, and trends like graceful degradation and progressive enhancement becoming widely adopted.

With the increasing adoption of these new standards we can expect the browser makers to implement new features like “border-radius”, aka rounded corners, very soon. This is an excellent time to start using new and exciting standards as new features are adopted.

To create rounded corners with CSS3 all you need to do is add one line of code to your existing site.

div { border-radius: 10px; }

Unfortunately there is some fallback. The property is not “supported” by browsers yet, but we can expect it to show up in IE9. As a huge supporter of progressive enhancement I believe it’s time to start moving away from the next method, CSS + Browser.

While the idealist perspective says use CSS3 the realist shouts for attention. If you want rounded corners, right now, the next technique is for you.

Method two: CSS + Browser = present

Vender specific CSS properties are actually included in the CSS specification. Mozzila and Webkit have both implemented their own versions of border-radius and can be used today.

View the Mozilla Specification
View the Safari Specification

Much like the CSS3 version the browser versions work like this.

div { -moz-border-radius: 10px; -webkit-border-radius: 10px; }

If your users are primarily using Firefox and Safari this might not be such a bad idea. If you need rounded corners in IE8, IE7, or IE6 you will need to use a different technique.

Method three: CSS + Images = present

We can use image positioning to achieve the illusion of rounded corners in IE, Firefox, and Chrome. Unfortunately this is where things go horribly wrong, all the rules go out the window, and bad coding is justified in the name of design.

Using images is not wrong but if we start thinking about design before considering our code we can get into a mess.  (It is easy to forget about producing semantic code when producing a design.)

The Code

For this tutorial we will be creating a fixed width box with rounded corners. Let’s look at our code.

Here we have well written markup. The content is defined properly and we can start to apply our CSS.

<div>
<h2><a href="#">Back to the Article</a></h2>
<p>If you want to go back to the article</p>
</div>

* { margin: 0; padding: 0; }
.section { padding: 0 0 10px; width: 250px; }
.section h2 { padding: 10px; width: 230px; }
p { padding: 10px; width: 230px; }

The Images

First we need to create some images with rounded corners; we will use a 10px border radius, and a border to add some depth to our design. These images will need to have a width equivalent to the width of the content we want to display; in this case we need to make it 250px wide.

I will use Photoshop to create my images. If you don’t have an image editor you might want to try out Gimp.

Mixing it down

Once our images are ready we can start coding the CSS. The only thing we need to know at this point is how to position them as background images with CSS. To do this we need to understand the box model and how we can use it to get the effect we are going for.

This is what our box would look like if we took an x-ray of it. You can see what is going on yourself if you use the favelet x-ray.

The colored sections represent the 10px padding for the h2, p, and div tags. As rule of thumb use padding equivalent to your border radius. This will keep the contents of our box from getting to close to the edge of our design.

When you add a background image to an element, like div or h2, the default poison of the image is always the top left corner. Because padding is considered to be part of the box’s interior, the padding pushes the content away from the corners. This keeps the text from overlapping the image corners.

Finally, we will need to add a border and background to the p tag that match our images. This will keep our design from breaking if we add more content.

.section h2 {
    background: transparent url(img/corner-top.gif) no-repeat;
    padding: 10px; width: 230px; }
a { color: #066; }
p {
    padding: 10px;
    width: 228px;
    background-color: #f2eac5;
    border-left: solid 1px #704420;
    border-right: solid 1px #704420; }

Note: When we add the border we had to remove the equivalent from the width; which is now 228px.

Now all we need to do is add background positioning to the div so that our second image is located at the bottom left corner instead of the default position.

.section {
    background: transparent url(img/corner-bottom.gif) no-repeat 0 100%;
    padding: 0 0 10px;
    width: 250px; }

Using images and CSS to create the illusion of rounded corners is the most commonly used technique to date.

In Summery

There are loads of options when it comes to rounded corners. Some are better than others. If you’re an idealist or a realist it is still good to know the options. Not so we can use them all, but so we can make better choices.