We all know that IE 6,7 not support the new increase CSS3 property, even with IE8 which is not fully ready for CSS3 yet. You know what, there is a script hack that helps you enable CSS3 support in IE (even with IE6) with new CSS3 properties, including: border-radius (rounded), box-shadow ( shadow), text-shadow (the shadow of the text).
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
It’s very simple to use. For example you have a box content that you want to make it support CSS3, the only thing you need is including one new line:
behavior: url(ie-css3.htc);
Code:
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
Although there are some issues with z-index and box-shadow color (only with #000 color), it’s really helpful script hack. You should give it a try!
Download script here.
Thanks Fetchak.com for this awesome script!


This is great, thanks!
.-= Marja´s last blog ..Design onder de loep 5 =-.
This is fantastic !!! tHANKS
can’t wait to give it a try…
thank you very much guys…
Thanks! Thank God for bookmarking your website and find this soon!
I tested the http://fetchak.com/ie-css3/ page on all IE versions and works smooth!
I can’t wait till CSS3 is fully supported by all browsers. I know IE is way slow to catch up, but this hack works great. Thanks for the tip and the script.
.-= Lucas Cobb´s last blog ..Facebook Like Button Plugin =-.
thank you very much.
Great, great! Thank you.
hope it will make easier in IE, thanks.
Great!!! Hack for ie. But it does shows the same effect that shows in Firefox. For example the box shadow is very thicker than in firefox.
Then we should check and run this script if user’s browser is IE only.
Super cool. Thank you!
Thanks Lam for lovely article .
.-= Shehzad´s last blog ..Docs.com – Social Online Word-Processing By Microsoft and Facebook =-.
great help there !!
Nice post! keep it up..
Great!! I tried it and works perfect, thanks for the article.
That’s great ! Thank you so much !!
Thanks, Thank you very much for the tips and the script. and you can see this and bim100 here, http://www.joelookyoung.com thanks again.
The solution is so simple, but useful. I like it, because it make the CSS code clean, no more hacks needed. Thanks for sharing.
.-= Deluxe Blog Tips´s last blog ..External Nofollow WordPress Plugin =-.
Works perfectly!
At first it didn’t work, an error message appeared saying “access denied to ie-css3.htc”, so I just saved the .htc file again with a new name and renamed it in CSS… It worked and never felt that content before toward IE =)
Thanks for sharing.
Don’t use hacks, just let IE6 die.
Ouch! You are so mean!
he’s right.
haha … I agree with axe
ie6 cannot die its a zombie
. weekly updates make ie6 a ms state of art browser.
companies love this piece of shit b´coz their intranet sites are “optimized” to work only on ie6.
but this script is still usefull for opera.
hahahaah YEAH it’s a big ZOMBIE.
I agree with you, axe. Don’t support it. If you continue to support IE6 it will further the myth that it’s still relevant and fixable as a browser – and therefore not worthy of upgrading. This would be a very bad thing!
awesome trick… thanks dude
.-= Harsha M V´s last blog ..Designing: a how to guide to get your client to brief you about the project !! =-.
great Lam – Im sure this will come in v handy – what do you think of IE 9 ‘s release ?
.-= Digital Art Empire´s last blog ..50+ Supremely Elegant & Fresh WordPress Themes =-.
Thanks, great solution!
Show de bola essa dica, thanks.
I have found this to be very buggy, and the border-radius hack
will eliminate any :hover CSS…
better to use Dean Edwards old, but good, code:
http://dean.edwards.name/weblog/
CSS3 is a new toys for many many WordPress designer and developer
.-= WP Tricks´s last blog ..How To Add Drop Caps on WordPress =-.
It’s pitty that this js doesn’t support form elements like input type text or textarea or maybe submit button.
but thanks for great work
Wow! This is great! will try this one. Thanks!
I would not call that a “Kick-ass CSS3 Support”. It seams you don’t know yet what CSS3 can do because this hack doesn’t do much for IE.
.-= micky2be´s last blog ..Gundam Cafe =-.
ie sucks, if it is ie6, 7, 8 or even 9 will suck.
ms just don’t want to give their users a standard compliant browser. shame on ms for this lame behaviour.
.-= Michael Pehl´s last blog ..Happy Easter =-.
I am tweaking the site and everything looks great in FF but sometimes things look a little weird in IE. I will definitely give this a try.
hmm ?? anyone tested this ? not working with my IE8 ?? Anyone ?
oops !!! its working when in server !
Oh, sorry. I forgot to tell you have to upload the script to server. lol!
well the file:/// protocol is not supported
Sweet! Thanks
.-= Greg Babula´s last blog ..jQuery Captify PluginCaptify is a plugin for jQuery written by… =-.
Hi..
Is it just about box-radius selector ?
Bcz, this is what it says on Fetchak site .
I need something, which works for all the CSS3 elements. Got a solution dude ?
.-= Joomla & Magento Services´s last blog ..Blank Admin Page after upgrading to Magento 1.4 =-.
cool work dude….thanks a lot.. now we are free to use css3 without scaring IE
OMG Thnx ! this is awesome
This is amazing!!!!
I will try this solution and shared it.
Hi,
Thanks for this awesome solution.
I have tried it but it isn’t working in any of my IE versions. I have also tested it live but the results are same.
Below is my css:
rounded-box{
width:235px;
background: #50cff1;
padding: 10px 0 10px 0;
border:3px solid #fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
behavior: url(ie-css3.htc);
}
Can anyone figure out, what I’m doing wrong?
Regards,
Dazy
I guess…
your [rounded-box] must be
.rounded-box or #rounded-box
your css worked when I tried.
Thanks, Corino for your quick reply!
Yes it is .round-box but I missed ” . ” while copying it here.
If its working at your side then I must be missing some other step.
I have just copy this “ie-css3.htc” file in the same folder where my style sheet is, and then add the line “behavior: url(ie-css3.htc);” in every class and id where ever is I’m using css3 properties.
Is there any other step I should do or its the right way as you have done?
Regards,
Dazy
it doesnt work for me :S it just make my grey radius css3 boxes, black with corners in ie8 and i also get this error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Thu, 1 Jul 2010 02:04:37 UTC
Message: Invalid argument.
Line: 121
Char: 2
Code: 0
it doesn’t work entirely for me either.
I got rounded corners, yes, but box shadow’s entire feature set doesn’t work. like you said, the shading doesn’t work, and that’s exactly what I am using.
wow! that’s really what i need for my new project. thank you very much.
thank your for your article, I resolve my problem
Hey great post,im really thanked
I cant seem to get it to work if I have a box inside a box. An outer div with rounded corners and inside it an inner div with rounded courners. The outer div works fine but the background color disappears on the inner div
IE 8: The div box does not stay in place if the browser is resized. As you drag the window open it moves to the right.
Can anybody help?
Just found this very promising solution: http://css3pie.com/
This looks like an awesome piece of code to use, but I am having an issue implementing it for a site right now. I am trying to emulate the effect I get in FF with the following css in IE 8:
.link-text a:hover {
color: #ffffff;
text-shadow: 0px 5px 6px #FFFAFA, 5px 0px 6px #FFFAFA, -5px 0px 6px #FFFAFA, 0px -5px 6px #FFFAFA;
z-index: 1;
behavior: url(ie-css3.htc);
}
In FF the effect when on hover over the link is a nice glow behind the text… (can’t wait for transitions to be supported! Good by flash… ) Currently their is no effect in IE… I have even tried a complete url to the file to call it with no luck. Do I need to change anything in the ie-css.htc file?
Thank you for any help!
http://ie6funeral.com/
I have created an improved version of the IE CSS3 htc file here: http://r.je/css3-in-ie.html demo page: http://r.je/css3-demo.html
Adds support for much</strong better looking shadows, RGBA and gradient backgrounds as well as different radiuses on each corner.
Its not working.
Tonttu, that css3pie link you posted is great! It’s the only version that doesn’t have bugs and works without a hitch for me
This is very helpful! Thanks for sharing.
This is not working parent pages
Hi, this script does not work properly with JQuery Library.
Wow! This solution is absolutely brilliant and easy to implement. Only I wished people at MS would behave differently. Too bad.
This is great, thanks!
Hi. I just finished a web page where I use a “css3″ and also “htc” file for a rounded corner effect. The page works fine in my local folder. but stops working once I put it on the web. I don’t know what is the problem, can any one help me to resolve this problem…
Does it support css gradients?
I have this drop down menu that is working fine on one of my own main sites. I’ve got it working on this other one that is only in development and it all works fine in firefox but doesn’t work all of the sudden in IE anything. Anyone have a suggestion for me for how to fix it? Check it out. It’s a site for powers construction group which is a recent customer of mine. IE doesn’t work, Firefox does… Go figure. Error line 121 char 21 of my js file.
Suggestions?
Yes it look great but if i want to change color of shadow how it does?
It always black color shadow.
wonderfull ,thx
Like Tonttu said, this works 100% better.
Bug free and much better support for more properties!
http://css3pie.com/
Nice code, But i didn’t understand