How to Use CSS3 Pie to Modernize Internet Explorer

One of the biggest dilemmas facing web developers is the incompatibility of various Internet Explorer versions with current web standards. Although Microsoft has promised CSS3 and even HTML5 support for IE9, Windows users, especially businesses, may continue to use IE8, IE7, or even the dreaded IE6 for years to come.

As a result, coding a site with exclusive CSS3 features will only alienate a large portion of your website’s visitors, and obligating them to download a standards-compliant browser, like Mozilla Firefox or Google Chrome, will only come across as arrogant.

A possible solution to the problem is to use a modernizer, which is a script or application that uses a variety of tricks to make your site appear as it should in all browsers. CSS3 Pie is javascript-based modernizer that helps Internet Explorer recognize cool CSS3 features such as rounded corners, soft drop shadows, and gradient fills. It is quick, easy, and works most of the time with very little tweaking.

Installation and Setup

This brief tutorial assumes you already have a website with CSS3 elements. In order to get CSS3 Pie working, you need to do two things: upload the javascript package and add special code to your CSS file.

CSS3 Pie live demo with menu tabs

1. The download from the website includes a number of files, but if everything goes as planned, all you need is, which is a compressed text file. Upload it to a place on your web server where your CSS file can have access to it.

2. Open your CSS file in your text editor and locate the elements that contain CSS3 properties. Within those elements, add the following rule:

The path to your file needs to be exact, so if it is not in the same directory as your CSS file, change it accordingly.

The final element should look something like this:

If it worked correctly, you should see the results in IE 6,7, and 8 immediately after uploading the altered CSS file.


If you see no changes at all, you could very likely need to adjust the path to your or even use the full URL. Just remember that IE will only accept an htc file from the same domain as the site, and “” and “” are considered two different domains.

Under some circumstances, you may need to try or even PIE.php to get it to work correctly. Consult the documentation for more details.

I have noticed that the combination of transparency and bold text results in some crazy-looking words in IE8. You might still need to use transparent image backgrounds in those situations.

The combination of CSS3 Pie and some jQuery functions seems to produce an error in IE. I have not found a solution for this, but the page still loads and displays correctly in spite of it.


Live demo of CSS3 Pie to test in Internet Explorer

With very little effort, CSS3 Pie can help your website look consistently appealing in all major browsers, without the headache of having to shape corner images or make fake drop shadows. The front page of the site includes a demo so that you can adjust CSS3 properties and see the live results in Internet Explorer. Best of all CSS3 Pie is free and open source and available for download at no cost.

Tavis J. Hampton

Tavis J. Hampton is a freelance writer from Indianapolis. He is an avid user of free and open source software and strongly believes that software and knowledge should be free and accessible to all people. He enjoys reading, writing, teaching, spending time with his family, and playing with gadgets.


  1. Very excited at first, but very heartbroken afterwards for two conspicuous reason:

    1. Does not work when you want to select which corners should be rounded and which one should not i.e. it curves all four corners indiscriminately

    /*rounded corner — WILL NOT WORK –*/
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    /*— WILL WORK
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;

    behavior: url(;

    2. Does not work when gradient background is applied.

    background: #d0e4f7; /* old browsers — WILL WORK –*/

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d0e4f7′, endColorstr=’#87bcea’,GradientType=0 ); /* ie — WILL NOT WORK –*/

  2. I read the documentation and was very embarrassed by my initial comment. The things works more magic than I imagined. Using the same examples as in my previous comment, this is how simple “PIE” makes life:

    1. To selectively rounding off corners, do…

    border-radius: 15px 15px 0px 0px;
    behavior: url(;

    2. To support grdient background, do

    -pie-background: linear-gradient(#d0e4f7, #73b1e7, #0a77d5, #539fe1, #87bcea); /*PIE*/

    PIE makes it a piece of cake. Nice job fellas

  3. dosn’t work in my web server anu of you can help me, T folloe all steps but didn’t work, you can telme where is my wrong, a reed that, i have to configure mi server for acept files htc do you have any idea of this?

    ples help

    1. they using a direct link… so write something like:

      behavior: url(;  (or

    2. 1. did you upload the to the correct location?
      2. did you set the exact path to the file in your css?

  4. I love the way they show an example with UI tabs on the demo page that DOESN’T WORK!

    I’ve tried to make PIE work with jquery UI tabs… it breaks them. Sure… the tabs and outside have nice rounded corners and groovy fades… but that’s kinda irrelevant when it’s refuses to render content under any  tab  other than  the current one when you click on it.


  5. hi am kishan,
    by using htc file rounded corners r working but text shadow is not working can any body help with me this  here is the code which i used

    .btn-wrap a {font:bold 32px/84px “Trebuchet MS”,Arial,Helvetica,sans-serif;  color:#412e28; text-shadow:1px 0 1px #ffd64d; text-decoration:none;   behavior:url(styles/;}

    .btn-wrap a:hover { color:#fff; text-decoration:none; text-shadow:0 1px 1px #2b2b2b;    behavior:url(styles/;}

  6. Hi!

    My question – i use – on pageload all is ok – but when i load new content with AJAX   dosn’t work.

    There is some possibilty to get to work also on new loaded contents ?


  7. Not working. I uploaded all the files (PHP, JS and HTC)
    into the www directory of Wamp (the same directory where I have stored
    the test HTML page), configured the htaccess and mime files of Wamp to
    allow HTC files to be loaded, and set the behaviour to the absolute path
    to the HTC file: http://localhost/ Still no effect in IE 6-8…

Comments are closed.