4

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 */
faressoft
  • 19,053
  • 44
  • 104
  • 146

3 Answers3

4

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.

Chris Bentley
  • 1,945
  • 18
  • 23
  • this page http://www.faressoft.org/eshterakat/border-radius/border-radius.html is in my server and it is works ! – faressoft Nov 02 '10 at 04:53
  • it is woring here http://www.faressoft.org/eshterakat/border-radius/border-radius.html but it doesn't works here http://www.faressoft.org/eshterakat/ – faressoft Nov 02 '10 at 05:45
  • I'm not sure why one even works at all as you appear to be serving the HTC's as text/plain. – Chris Bentley Nov 02 '10 at 06:27
  • I'm using WAMP server. Where do I add the .htc file? There is no config or .htaccess file. Thanks! – Chris22 Nov 29 '12 at 17:41
  • @Chris22 You can put the .htc file anywhere under your web root -- it's a ADDType declaration that you add the your httpd.config or .htaccess file – Chris Bentley Nov 30 '12 at 00:07
  • @ChrisBentley thanks, I couldn't remember where the httpd.config file was! I found it launching the control panel in WAMP on my desktop – Chris22 Dec 04 '12 at 22:20
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 e.g. 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.

Sergey Glotov
  • 20,200
  • 11
  • 84
  • 98
bharat bhushan sharma
  • 21
  • 1
  • I have been trying to get some borders right in IE8. Your if solved my background color problem! Thanks a lot. – nrod May 03 '13 at 14:41
1

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

Graphical Insight
  • 11
  • 1