How to apply border radius in IE8 and below IE8 browsers?

Question

I would like to know how to apply border-radius to IE8 and below IE8 browsers.

I know that border-radius is a HTML5 feature and IE8 doesn't support it.

I found that by using .htc we can achieve this but by using htc I am encountering the problem of black background.

I am unable to overcome this problem.

Is there any other way of applying border-radius to IE8? If so can anyone explain me how?

Answer 1

Option 1

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

Option 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Option 3

http://css3pie.com/

Option 4

http://www.netzgesta.de/corner/

Option 5

See this question

EDIT: Option 6

https://code.google.com/p/jquerycurvycorners/

Answer 2

Firstly for technical accuracy, border-radius is not a HTML5 feature, it's a CSS3 feature.

The best script I've found to render box shadows & rounded corners in older IE versions is IE-CSS3. It translates CSS3 syntax into VML (an IE-specific Vector language like SVG) and renders them on screen.

It works a lot better on IE7-8 than on IE6, but does support IE6 as well. I didn't think much to PIE when I used it and found that (like HTC) it wasn't really built to be functional.