Introduction

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozilla/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. If you see rounded corners on the box to the right, your browser has implemented the border-radius option. Warning: as of this writing, Internet Explorer does not support rounded corners. Given that they control over 80% of the market, should you choose to use this method, most people won't see your rounded corners (they will see regular rectangles). But it's only a matter of time before they come around.

The Basics

Start with a simple box. Here's a div block that contains a heading and a paragraph. The actual contents are not important, just as long as the class name used matches the one in the CSS below. By the way, "rcBox" stands for "rounded corner box," in case I confused anyone there.

<div class="rcBox1">
    <h2>Lorem Ipsum</h2>
    <p>Dolor sit amet, consectetuer adipiscing elit. Proin vene natis turpis ut quam. 
        In dolor. Nam ultrices nisl sol licitudin sapien. Ut lacinia aliquet ante.</p>    
</div>   

Now the CSS code:

.rcBox1 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border-radius:10px; 
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
}

First I set some properties you should already be familiar with. I started with a background-color so that the box would be visible. I've specified a light gray—feel free to change it. Another property I've included is width—17em is arbitrary—feel free to use other sizes. Padding is needed to keep the rounded corners outside of the content area; otherwise it can get very crowded. A good rule of thumb—you should have padding equal to or greater than the border-radius amount (see below).

The key here is the border-radius property; it creates a curved corner and sets the radius of the curve (the distance from the element to he edge of the curve) to the amount specified.

Okay that's cool, but what's with the "-moz" and "-webkit" bits? Well, CSS3 is still not fully implemented; in the last few years browsers have slowly been adding the new style properties on an experimental basis. Many browsers use code that is specific to their browsers to test these things out. Mozilla, the maker of Firefox and Camino use the "-moz" prefix for their browsers. "-webkit" is used by Safari, Chrome, the iPhone, and some other devices.

However as of this writing, Safari (for Mac) and Chrome now support the border-radius property without the "-webkit" prefix, so you could probably just go with the regular "border-radius" and "-moz" properties.

Borders

When you add a border to you box it also curves. Try this:

.rcBox1 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius:10px; 
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
}

You should now have a darker gray border around your box that curves around the corners. Pretty cool, eh?

Mixing and matching

It's also possible to specify a different radius for each corner, much like you can specify different widths and colors to the top, right, bottom and left borders. The -moz and -webkit versions use a slightly different syntax:

.rcBox1 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border: 2px solid #ccc;

    border-top-left-radius:35px; 
    border-top-right-radius:10px;  
    border-bottom-right-radius:20px;  
    border-bottom-left-radius:15px;
    -moz-border-radius-topleft: 35px; 
    -moz-border-radius-topright: 10px;  
    -moz-border-radius-bottomright: 20px;  
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-top-left-radius:35px; 
    -webkit-border-top-right-radius:10px;  
    -webkit-border-bottom-right-radius:20px;  
    -webkit-border-bottom-left-radius:15px; 

}

Being able to specify different radii for different corners has a number of practical use. One of the most popular navigation conventions on the Web is the use of tabs-like buttons that until now required the creation of special graphics in Photoshop or Illustrator. With rounded corners we can create tabs very easily.

Try this. In the markup create a new box just like the first, but leave out the paragraph (just use the heading). Change the class to rcBox2. Then write this style rule:

.rcBox2 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border: 2px solid #ccc;

    border-top-left-radius:20px; 
    border-top-right-radius:20px;  
    border-bottom-right-radius:0;  
    border-bottom-left-radius:0;
    -moz-border-radius-topleft: 20px; 
    -moz-border-radius-topright: 20px;  
    -moz-border-radius-bottomright: 0;  
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius:20px; 
    -webkit-border-top-right-radius:20px;  
    -webkit-border-bottom-right-radius:0;  
    -webkit-border-bottom-left-radius:0; 

}

Elliptical corners

The border-radius values allow for even more customizing, they will take two values per corner—the first for the horizontal width, the second for the vertical width of the curve. This allows for elliptical curves. To see this in action duplicate your first box (rcBox1) and rename it rcBox3 in the div. Then write the following style rule:

.rcBox3 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border: 2px solid #ccc;
    border-top-left-radius:40px  20px;   
    border-top-right-radius:20px 40px;   
    border-bottom-right-radius:40px  20px;    
    border-bottom-left-radius:20px  40px;
    -moz-border-radius-topleft:40px  20px;    
    -moz-border-radius-topright: 20px 40px;    
    -moz-border-radius-bottomright: 40px  20px;    
    -moz-border-radius-bottomleft: 20px 40px;
    -webkit-border-top-left-radius:40px  20px;
    -webkit-border-top-right-radius:20px 40px;
    -webkit-border-bottom-right-radius:40px  20px;
    -webkit-border-bottom-left-radius:20px 40px;
}

Shorthand

As with most CSS properties there are shorthand versions of the border-radius property that combine the different corner values into one line. To set different border values for each corner you could write it this way:

.rcBox3 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 30px 20px 10px 15px;  
    -moz-border-radius: 30px 20px 10px 15px;
    -webkit-border-radius: 30px 20px 10px 15px;
}

The first value is for the top-left corner, then they move around the shape clockwise.

You can also do this for elliptical corners. Try this:

.rcBox3 {
    width: 17em;
    background-color: #eee;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius:  40px 20px 40px 20px / 20px 10px 20px 10px;  
    -moz-border-radius: 40px 20px 40px 20px / 20px 10px 20px 10px;
    -webkit-border-radius: 40px 20px 40px 20px / 20px 10px 20px 10px;
}

The first four numbers determine the horizontal radii for the corners (once again starting in the upper-left), and the second set of numbers after the slash determine the vertical radii for each corner.