Video tutorials

Rounded Corners and other CSS 3 Features for Internet Explorer with CSS3Pie

Edit: there's actually a CSS3PIE module for Drupal!

In this episode, we'll take a look at how to make popular CSS3 features such as rounded corners and gradients in your Drupal theme to work in older versions of IE (<9). Drupal 7 theme Bartik is used as an example.

Watch the Screencast

Tutorial In a Nutshell

We’re going to be adding CSS3 features for IE to Bartik, Drupal 7 core theme.

CSS3 for IE in Drupal

This is how it looks in IE 8. Predictably, no CSS 3 goodness.

CSS3 for IE in Drupal

If you want IE to look like modern browsers, there’re several ways to deal with it. Personally, I wanted to find a solution that didn’t involve more javascript or browser hacks. Enter CSS3Pie. The front page has a demo where you can try it out (open the page with IE to see it in action).

CSS3 for IE in Drupal

CSS3Pie is very simple: to trigger it, you need to download file and add just one line to your css properties with the path to the file :

behavior: url(/

If you use Drupal, you have to cpecify the full path to the file (ex: sites/all/themes/your_theme/

CSS3 for IE in Drupal

Check the theme, and now it’s working.

To fix the gradients, add the following line:

-pie-background: linear-gradient (color1, color2)

CSS3 for IE in Drupal

Note that sometimes you need to add position relative to the target element or its parent. Consult with the CSS3PIE documentation for possible issues and examples of usage. As usual, don’t forget to clear your cache if you have it turned on and keep in mind that IE can’t load more than 31 stylesheets at a time.