Rounded corners without images

The CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Here is the basic example:

Example section

Code for the above example is below:

.rounded-corners{
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
background-color:#f2f2f2;
}

The first thing you might notice is that we defined the border-radius four times over. This is because current browser implementations aren't completely refined according to W3C's recommendations. Since each of the browsers still has its own unique rule, they apply prefixes such as -moz and -webkit.

In the above example, -moz-border-radius is for Firefox, -webkit-border-radius is for Chrome/Safari and -khtml-border-radius is for older Konquerer browsers. Finally, the plain, old border-radius is future-proofing for whenever browsers properly support this attribute.

Main problem with this is, it wont work on IE browsers. Fortunately, IE9 will have some CSS3 support, but until then we'll have to use a border-radius hack(use images) in all IE browsers.