CSS3 PIE

What is CSS3 PIE?

CSS3 introduced some new styling features like rounded corners, drop shadows, gradient fills, multiple images in background and many more. But many features doesn't supported by IE6, IE7 and IE8. CSS3 PIE is here to solve the problem. PIE stands for Progressive Internet Explorer. It is a open source HTC component, which allows IE to recognize and display many CSS3 properties.

PIE support following CSS3 features for IE6 to IE8

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

What you need to do?

First of all download the required files and upload all files to your server pie folder. Click here to download the required files. Now in your CSS class all this line of code "behavior: url(pie/PIE.htc);" and test your site in IE6, IE7 and IE8.

Example Code:

.css3-pie-gradient{
width: 660px;
height: 200px;
margin-left: 15px;
border-radius:20px;
position: relative;

background-size: 20px 20px;
background-color: #009900;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;

behavior: url('http://www.a2zwebhelp.com/pie/PIE.htc');
}

HTML

<div class="css3-pie-gradient"><!-- --></div> 

Output:

Click here to know more about CSS3 gradient background Property

Click here to know more about CSS3 Border Property

Click here to know more about Gradient Border.