Making cool looking CSS3 support for IE

So here are the steps in a nutshell

1. Basically to add support we will download a fix from here
2. Upload it to your server in a root folder so it would be accessible in http://mydomain/PIE.htc
3. Add “behavior: url(‘/PIE.htc’);”  to any css class that requires CSS3 functionality

How will it work?

The PIE.htc file will only load in Internet Explorer browsers and will look for “box-shadow:”, “border-radius:” and “-pie-background: linear-gradient(#xxx, #xxx) ” in your CSS div tag. What’s great about this method is that it doesn’t use java or Microsoft Filters when creating shadows or gradients like the ie-css3 fix here, which means very complex layouts are possible.

So your final div tag would look like this:

.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; /* Support with PIE for IE6,7,8 */

-webkit-box-shadow: 0 1px 2px #333;
-moz-box-shadow: 0 1px 2px #333;
box-shadow: 0 1px 2px #333; /* Support with PIE for IE6,7,8 */

background: -webkit-gradient(linear, left top, left bottom, from(#48B9FD), to(#0090DF));
background: -moz-linear-gradient(top, #48B9FD, #0090DF);
-pie-background: linear-gradient(#48B9FD, #0090DF); /* Support with PIE for IE6,7,8 */

position:relative; /*Sometimes IE fix won't show up if this is missing */
behavior: url('/PIE.htc'); /* Support for IE6,7,8 */

}

Let us know how it works for you in the comments!