Creating rounded corners using CSS [closed]

Question

Since CSS3 was introduced, the best way to add rounded corners using CSS is by using the border-radius property. You can read the spec on the property, or get some useful implementation information on MDN:

If you are using a browser that doesn't implement border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), then the links below detail a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.

1. CSS Design: Creating Custom Corners & Borders
2. CSS Rounded Corners 'Roundup'
3. 25 Rounded Corners Techniques with CSS

I looked at this early on in the creation of Stack Overflow and couldn't find any method of creating rounded corners that didn't leave me feeling like I just walked through a sewer.

CSS3 does finally define the

border-radius:

Which is exactly how you'd want it to work. Although this works OK in the latest versions of Safari and Firefox, but not at all in IE7 (and I don't think in IE8) or Opera.

In the meantime, it's hacks all the way down. I'm interested in hearing what other people think is the cleanest way to do this across IE7, FF2/3, Safari3, and Opera 9.5 at the moment..

I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.

If you want to use all corners with same radius this is the easy way:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

but if you want to control every corner this is good:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.

As told in other answers, this works beautifully on Firefox, Safari, Camino, Chrome.

If you're interested in creating corners in IE then this may be of use - http://css3pie.com/

I would recommend using background images. The other ways aren't nearly as good: No anti-aliasing and senseless markup. This is not the place to use JavaScript.

As Brajeshwar said: Using the border-radius css3 selector. By now, you can apply -moz-border-radius and -webkit-border-radius for Mozilla and Webkit based browsers, respectively.

So, what happens with Internet Explorer?. Microsoft has many behaviors to make Internet Explorer have some extra features and get more skills.

Here: a .htc behavior file to get round-corners from border-radius value in your CSS. For example.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Of course, behavior selector does not a valid selector, but you can put it on a different css file with conditional comments (only for IE).

The behavior HTC file