Kick-ass CSS3 Support in IE6, 7, and 8

written by aext on April 23, 2010 in Popular and Quick Tips and Tools with 96 comments

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).

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!