CSS3 Rounded corners for IE 6, 7 & 8

Well!! This was the one of the top issue for IE 6-8. Today I came across a pretty cool solution to retain the rounded corners in IE6+ versions.

CSS PIE

Thanks to PIE. PIE stands for Progressive Internet Explorer. It is an IE attached behavior which helps IE to recognize the few CSS3 properties.

All you need to do is to add a pie.htc file into your root folder and link it to the class where you need to use such css3 properties.

For example I am writing css for rounded corners as mentioned in this post title

<div>rounded corner</div>​

div {
      behavior: url(PIE.htc);
       border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px; 
}

Download the pie.htc here

This gives you the perfect result in IE 6+, as it gives in all other modern browsers.

PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

Good Luck!!