Creating rounded corners in IE7 / IE8

Question

I am creating a rounded corners tabs, that works fine in IE9, Mozilla and Chrome, but not in IE7/IE8.

Here is the code:

Answer 1

border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners

Answer 2

IE 7/8 do not support border-radius. I hear IE9 does though.

This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/ . You'll need to download border-radius.htc and put the following code in your CSS:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

Answer 3

There are following solutions :

1. CSSPie (http://css3pie.com/ but its compressed js file is 40 KB in size)

2. There is another solution using htc file for IE

       behavior: url(http://yoursite.com/border-radius.htc);
            (almost 40 KB of size)
   

   The guide can be found here http://dimox.net/cross-browser-border-radius-rounded-corners/

3. Another solution that I personally recommend is :

        jquery.corner.js (http://jquery.malsup.com/corner/) 
   

   It's uncompressed js file is 10 KB in size.

Answer 4

The Internet Explorer supports the CSS border-radius property natively not until version 9. For lower version of IE, check the jQuery plugin kvijayhari mentioned, jQuery Corner.

Answer 5

Use jquery corner , it will work on all major browser

http://jquery.malsup.com/corner/

You can even configure the corners the way you like!!