How to use border-radius.htc with IE to make rounded corners

Question

How to use border-radius.htc with IE to make rounded corners

I am using border-radius.htc to fix border-radius in IE

It is works very well here http://www.faressoft.org/eshterakat/border-radius/border-radius.html

But it doesn't work in my html page ! I don't know why ! http://www.faressoft.org/eshterakat/

-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
behavior:url('Js/border-radius.htc'); 

/* I tried '../Js/border-radius.htc' it didn't work too */
/* I tried '/Js/border-radius.htc' it didn't work too */
/* I tried 'Js/border-radius.htc' it didn't work too */

Answer 1

There are 2 gotchas with HTC's;

• The server has to server the HTC with the correct MIME type (text/x-component) if your on Apache add this to your config or .htaccess: AddType text/x-component .htc

• In CSS URLs are relative to the CSS file... HTC references are relative to the Calling HTML page - be careful.

Answer 2

Just edit border-radius.htc

fill.color = fillColor;

into

fill.color = (fillColor=='transparent') ? 'none': fillColor;

and change and put css file and htc file into same folder for eg folder name "cssSupport" then its like:

zoom:1;
display: block;
background-color:Transparent;
border: 1px solid #696;   
-webkit-border-radius:8px;   
-moz-border-radius:8px;   
border-radius:8px;
border-bottom-right-radius:8px;   
border-bottom-left-radius:8px;   
behavior:url(../CSS_Support/border-radius.htc);

Try this. It will definitely work. Enjoy IE8.

Answer 3

This is actually something specific, that was mentioned very briefly.

While using the HTC components, you need to make sure that they are located in the site root location. Then you would just mention the behavior:url(css3orw/e.htc);

The url in this instence is not the same with how you refernce images in css. This will never need you to pull off some url(../../asf.ext)etc that you may be used to with working with the relative nature of the Images in css