Enabling border-radius in IE 6-8

[StevenBullen]

Ok I have simplified it down to a basic shell. Test this on your web server and see if it works. EDIT: I forgot to mention that this was using what @karlpcrowley recommended first of all

Download

If this does not work then it might be the way the file is being requested from the server. Basically instead of text/x-component it might be requested as a text/html which will cause it not to work.

You can fix this problem one of two ways….
1st I have added a file called ie-css3.php which requests the file with the correct headers.
Just change

behavior: url(ie-css3.htc)

for

behavior: url(ie-css3.php)

2nd You can add an .htaccess file that does it for you which I have also added.

If it’s not working then I am stumped. :)

[ray]

hey
StevenBullen,
its worked very well :)

[samkat]

After some tries I found one thing
It does not work for id but it works very well with class

I mean

#rounded_corners {
behavior: url(ie-css3.htc)
} //does not work

.rounded_corners {
behavior: url(ie-css3.htc)
} //works perfectly

[Kitty Giraudel]

Please don’t do this. Loading kilobytes of polyfills for aesthetics reasons is not good UX.

[dihanalex]

Dear al my friends, i am new member css-tricks.
please any body help me?
I also face the same problem and I made a css3 border radius in IE6,7,8 and 9 does not supported.
any body please give sample complete document or ready file.

please any body help me.
thanks by
dihan
[email protected]

[Paulie_D]

IE9 does support border-radius.

I wouldn’t bother with it in lower versions as the various solutions all have their faults.

However, if you must then…

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

Or

http://css3pie.com/

[Kitty Giraudel]

Once again: please don’t do this.

[shankarkhanal]

The W3C CSS Validation Service
Property behavior doesn’t exist : url(js/PIE.htc)
why?

[CrocoDillon]

Because it’s not part of the standard, but an IE legacy thing. http://reference.sitepoint.com/css/behavior

[diyafury]

I’m using csspie with no issues in a LESS mixin for border-radius. Works like a charm… I have come across one issue…

I have an border radius on a parent element with a grey background colour and it’s child with a white background colour… The issue that I’m having is that after pie runs, the white background of the child element disappears. When I hover the parent element, the child element changes its background-colour, so I’m confident it’s not the css. It seems to be an issue with pie.htc… has anyone come across this issue and have very cleverly devised a handy fix?

[diyafury]

Apologies for that first sentence…. ignore ‘with no issues’ ;) And… the child element also have border-radius (pie.htc behaviour) applied.

[diyafury]

Hi guys..

It’s a know issue with static positioned elements: http://css3pie.com/documentation/known-issues/ , change the nested child element to position:relative fixed it.

Cheers

[Author]

Posts