STARIKOVS

In this article, I am going to test CSS 3 rounded corners. I do want to know can I use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

Browsers

Before CSS3 appeared, web developers had to use some combinations of DIV’s or other container elements with curved corner images to achieve the desired result. Today, when CSS3 is supported by almost all the popular browsers the approach to make rounded corners is very easier, shorter and faster.

The only one little problem has place, is the compatibility with IE.

Here’s the table of browsers I tested on:

IE workaround

border-radius.htc

To make curved corners in IE the behavior htc file should be used. You can download the file from here http://code.google.com/p/curved-corner/.

border-radius: 10px; /* CSS3 declaration */
...
behavior: url(border-radius.htc);

There’re some limitations, for example, this behaviour htc file can round only all the corners of the container, but it cannot round only one, two or three specific corners. So, the CSS3 allows to round only right corner, for example, but the behavior htc file doesn’t. Other issues you can find at the page of this htc file.

PIE library

Another usefull library is PIE. With PIE you can round corners and reach other CSS3 features to work. Let’s see an example that is using PIE:

border-radius: 10px; /* CSS3 declaration */
...
behavior: url(PIE.htc);

CSS rules for all browsers

/* CSS3 declaration */
border-radius: 10px; 
 
/* declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-radius: 10px; 
 
/* declaration for Mozilla browsers like FireFox */
-moz-border-radius: 10px; 
 
 /* Linux browsers */
-khtml-border-radius: 10px;
 
 /* maybe ALL IE */
behavior: url(border-radius.htc);

Understanding syntax

The curved corner is a quarter of the ellipse that defines the shape of the corner. To understand that see the image from the W3C:

So, to define the rounded corner the horizontal and vertical radii should be set, but the vertical radius parameter is optional. If you define only one parameter it will be applied to the horizontal and vertical radii.

Now, let’s see the syntax:

border-radius: [<length> | <percentage>]{1,4} [ / [<length> | <percentage>]{1,4} ]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

The ‘border-radius’ sets values for all the four corners.

Examples:

/* all the corners have an equal curved corner */
border-radius: 10px; 
 
 /* works as in the picture above */
border-radius: 55pt / 25pt;

border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius,
border-top-left-radius: [<length> | <percentage>] [<length> | <percentage>]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

All of these properties set the only one specific corner.

Examples:

/* sets the top left corner */
border-top-left-radius: 10px;
 
 /* sets the top right corner as in the picture above */
border-top-right-radius: 55pt 25pt;

More info on syntax you can find at W3C site: http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-border-radius.

Practice

Let’s create a div the corners of which we will curve.

<div id="curved-corners"></div>

To curve all the corners we should write these styles:

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid red;
 
        /* CSS3 declaration */
	border-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius: 20px; 
 
        /* Linux browsers */
	-khtml-border-radius: 20px;
 
        /* maybe ALL IE  */
	behavior: url(border-radius.htc);
}

By the way, you should download border-radius.htc from Google Code and copy it to the location you need, and then specify the correct path to border-radius.htc. So, let’s look at the example above in work:

Now, let’s curve only top left and bottom right borders. We are still using the same DIV but define another styles.

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid blue;
 
        /* CSS3 declaration */
	border-top-left-radius: 20px; 
	border-bottom-right-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-top-left-radius: 20px; 
	-webkit-border-bottom-right-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomright: 20px;
 
        /* Linux browsers */
	-khtml-border-top-left-radius: 20px;
	-khtml-border-bottom-right-radius: 20px;
}

We aren’t using htc file for IE because it cannot curve specific corners. It can curve all the four corners only. So, let’s see the example above at work:

Conclusion

After testing how CSS3 can round borders, I can say that it’s cool. Even if you want to curve borders in IE6+ there’s a workaround but it’s a bit limited. I hope that some issues for this IE htc file will be fixed soon. Microsoft promised that IE9 will support CCS3 technique to curve corners. By the way, there’re a lot of popular web sites that have already begun to use CSS3 technique to round corners.

Links

W3C CSS3 Border Radius

W3C CSS3 Border Radius newer doc

Rounded corner HTML elements using CSS3 in IE (Download at Google Code)

PIE library