Menu Search
Jump to the content X

CSS3 Solutions for Internet Explorer


CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the majority of the properties and features introduced in CSS3.

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.


But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).

Opacity / Transparency Link

I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. It’s been around so long, that we often forget that it’s actually a CSS3 property. Although IE doesn’t offer support for the opacity property, it does offer similar transparency settings via the proprietary filter property:

The Syntax Link

#myElement {
	opacity: .4; /* other browsers  and IE9+ */
	filter: alpha(opacity=40); /* IE6+ */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */

You really only need the second line, which works in all versions of Internet Explorer. But if for some reason you needed the opacity setting to apply only to IE8, and not to IE6/7, then you can use the last line, which the older versions don’t recognize. The third line is just another way to do basically the same thing, but with a more convoluted syntax.

The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44” for IE would be “0.44” for the others). Also, as many have experienced when using opacity (even when using the standard method), the opacity settings will be inherited by all child elements, for which there is no easy workaround.

The Demonstration Link

This element has a solid blue background color (#0000FF), but is 60% transparent, making it appear light blue in all browsers

This is the same element without the opacity settings.

The Drawbacks Link

  • The filter property is a Microsoft-only property, so your CSS won’t validate
  • As is the case for the opacity property, the IE filter causes all child elements to inherit the opacity
  • There could be performance issues with the IE filters

Rounded Corners (border-radius) Link

The border-radius property (more commonly referred to as CSS3 rounded corners) is another popular CSS3 enhancement. This property has allowed developers to avoid the headache of bloated JavaScript or extra positioned elements to achieve the same effect. But once again, Microsoft doesn’t want to cooperate, so IE doesn’t have any support for this property.

Fortunately, at least one person has come up with a very usable workaround that can be used in an IE-only stylesheet. Remiz Rahnas of HTML Remix has created an HTC file called CSS Curved Corner that can be downloaded off Google Code.

The great thing about this piece of code is that it doesn’t require any extra maintenance if you adjust the amount of radius on your rounded corners. You just link to the file in your CSS, and the script will automatically parse your CSS to find the correct radius value from the standard border-radius property.

The Syntax Link

Here’s what your code might look like:

.box-radius {
	border-radius: 15px;
	behavior: url(;

The way it works is pretty straightforward, as shown above. Ideally, however, you would apply the behavior property in an IE-only stylesheet, using the same selector in your CSS, so the code knows where to get the radius value from.

The Demonstration Link

Because this technique requires use of an external HTC file, you can view the demo at this location.

The Drawbacks Link

  • The HTC file is 142 lines (minifying or GZipping would help, but it’s still extra bloat)
  • The behavior property will make your CSS invalid
  • Your server needs to be able to load HTC files for this technique to work
  • IE8 seems to have some trouble in some circumstances when the HTC file forces the curved element to have a negative z-index value

Box Shadow Link

The box-shadow property is another useful CSS3 feature that will even add a curved box shadow naturally to an element that uses the border-radius property. IE doesn’t support box-shadow, but a filter is available that offers a close replication.

It should be noted that the box-shadow property has been removed from the CSS3 Backgrounds and Borders Module, so its future in CSS3 seems to be a little uncertain right now.

The Syntax Link

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

As shown above, in addition to the proprietary WebKit and Mozilla properties, you can add a shadow filter that works in all versions of Internet Explorer.

The Demonstration Link

This element has a drop shadow that works in Internet Explorer.

The Drawbacks Link

  • The settings for the IE shadow filter do not match those of the other proprietary properties, so in order to make it look the same, you have to fiddle with the values until you get it right, which can cause maintenance headaches
  • The filter property doesn’t validate, but neither do the WebKit and Mozilla properties, so this is a drawback in all browsers

Text Shadow Link

Adding drop shadows to text elements has been practiced in both print and web design for years. On the web, this is normally done with images and occasionally with text duplication combined with positioning. CSS3 allows developers to easily add shadows to text using a simple and flexible text-shadow property.

Unfortunately, there doesn’t seem to be an easy way to add a text shadow in Internet Explorer — even with the use of proprietary filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof has written a jQuery plugin that implements text shadows in Internet Explorer.

The Syntax Link

First, in your CSS, you would set the text-shadow property:

.text-shadow {
	text-shadow: #aaa 1px 1px 1px;

The values specify the shadow color, position on the horizontal axis, position on the vertical axis, and the amount of blur.

After including the jQuery library and the plugin in your document, you can call the plugin with jQuery:

// include jQuery library in your page
// include link to plugin in your page


The plugin also allows the use of parameters to override the CSS. See the plugin author’s original web page for more details on the parameters.

Although there is a cross-browser jQuery plugin that applies drop shadows, the one I’m demonstrating above actually utilizes the CSS3 value that’s already set in your CSS, so it has the advantage of working along with the standard CSS setting for text shadows, whereas the other plugin needs to be set independently.

The Demonstration Link

Because this technique requires use of the jQuery library and an external plugin file, you can view the demo at this location.

The Drawbacks Link

There are some significant drawbacks to this method that make it very unlikely to ever be practical. You’re probably better off creating an image to replace the text for IE instead.

  • In order to make the shadow look almost the same in IE, you need to use different settings in an IE-only stylesheet, adding to development and maintenance time
  • Requires that you add the jQuery library, in addition to a 61-line plugin file (GZipping or minifying would help)
  • The IE version of the shadow never looks exactly the same as the other browsers
  • When using the overriding parameters, the plugin seems to be rendered somewhat useless, displaying a big ugly shadow that won’t change with new values
  • Unlike the CSS3 version, the plugin doesn’t support multiple shadows
  • For some reason, in order to get it to work in IE8, you need to give the element a z-index value

Gradients Link

Another practical and time-saving technique introduced in CSS3 is the ability to create custom gradients as backgrounds. Although Internet Explorer doesn’t support gradients of the CSS3 variety, it’s pretty easy to implement them for the IE family using proprietary syntax.

The Syntax Link

To declare a gradient that looks the same in all browsers, including all versions of Internet Explorer, use the CSS shown below (the last two lines are for IE):

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

For the IE filters, the GradientType can be set to “1” (horizontal) or “0” (vertical).

The Demonstration Link

This element has a linear gradient that works in Internet Explorer.

The Drawbacks Link

Some of the usual drawbacks apply to gradients created with the IE-only filter, along with some other problems.

  • Your CSS won’t validate, although that’s also true for the WebKit and Mozilla values
  • Different code is needed for IE8, adding to maintenance time
  • The WebKit and Mozilla gradients allow for “stops” to be declared; this doesn’t seem to be possible with the IE gradient, limiting its flexibility
  • IE’s filter doesn’t seem to have a way to declare “radial” gradients, which WebKit and Mozilla support
  • For a gradient to be visible in IE, the element with the gradient must have layout

Transparent Background Colors (RGBA) Link

CSS3 offers another method to implement transparency, doing so through an alpha channel that’s specified on a background color. Internet Explorer offers no support for this, but this can be worked around.

The Syntax Link

For the CSS3-compliant browsers, here’s the syntax to set an alpha channel on the background of an element:

#rgba p {
	background: rgba(98, 135, 167, .4);

With the above CSS, the background color will be set to the RGB values shown, plus the optional “alpha” value of “.4”. To mimic this in Internet Explorer, you can use the proprietary filter property to create a gradient with the same start and end color, along with an alpha transparency value. This would be included in an IE-only stylesheet, which would override the previous setting.

#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');

The “gradient” will look exactly the same in IE as in other browsers, duplicating the RGBA transparency effect.

The Demonstration Link

This first example below will work in browsers that support RGBA colors. The second example will only work in Internet Explorer.

This paragraph has a background color with a 40% opacity setting declared using RGBA (doesn’t work in IE).

This paragraph has an IE-only filter applied to mimic RGBA transparency (only works in IE).

The Drawbacks Link

  • The filter property is not valid CSS
  • Requires an extra line of CSS in an IE-only stylesheet
  • The element needs to have layout

Note: Initially, I had used a PNG image method to achieve this effect, but apparently it was working only partially in IE7 and IE8, and required a PNG-hack for IE6, so I tried the method given by Liam and Matias in the comments and this seems to work better. The PNG method is another option, but seems to be more troublesome, and has more drawbacks.

Multiple Backgrounds Link

This is another CSS3 technique that, when widely supported, could prove to be a very practical addition to CSS development. Currently, IE and Opera are the only browsers that don’t support this feature. But interestingly, IE as far back as version 5.5 has allowed the ability to implement multiple backgrounds on the same element using a filter.

The Syntax Link

You might recall trying to hack a PNG in IE6 and noticing the image you were trying to hack appearing twice, which you had to remove by adding background: none, then applying the filter. Well, using the same principle, IE allows two background images to be declared on the same element.

To use multiple backgrounds in Firefox, Safari, and Chrome, here’s the CSS:

#multi-bg {
	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;

To apply two backgrounds to the same element in IE, use the following in an IE-only stylesheet:

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */

The Demonstration Link

The box below shows multiple backgrounds in Chrome, Firefox, and Safari (you won’t see anything in IE):

The next box shows multiple backgrounds in Internet Explorer 6-8 (you’ll only see a single background in other browsers):

The Drawbacks Link

  • Your CSS will be invalid
  • The second background image applied using the filter property will always be in the top left, and cannot repeat, so this method is extremely inflexible and can probably only be used in a limited number of circumstances
  • In order to get the element to center (as in other browsers), you have to create an image with the exact amount of whitespace around it, to mimic the centering, as I’ve done in the demonstration above
  • The AlphaImageLoader filter causes performance issues, as outlined here

Element Rotation (CSS Tranformations) Link

CSS3 has introduced a number of transformation and animation capabilities, which some have suggested are out of place in CSS. Nonetheless, there is a way to mimic element rotation in Internet Explorer, albeit in a limited fashion.

The Syntax Link

To rotate an element 180 degrees (that is, to flip it vertically), here is the CSS3 syntax:

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);

To create the exact same rotation in Internet Explorer, you use a proprietary filter:

#rotate {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

The Demonstration Link

The element below should appear upside down in Internet Explorer, having a rotation of 180 degrees set via the filter property. To demonstrate this more emphatically, I’ve applied a 3px solid gray “bottom” border, which should appear at the top of the element.

This element is rotated 180 degrees in Internet Explorer.

The Drawbacks Link

  • Your CSS won’t validate, although that’s also true for the WebKit and Mozilla code
  • While the Mozilla and WebKit code allows for rotation changes to increment by a single degree, the IE filter only permits 4 stages of rotation, minimizing its flexibility

Update: As pointed out in the comments, IE does allow the ability to rotate objects with the same flexibility as the CSS3 methods. To explain the method here is too complex, but the CSS3, please project by Paul Irish has implemented this method into its code generator, so you can use that to create the IE-compatible code for CSS3 rotations.

Conclusion Link

Developers might hate me for compiling this list, seeing as any client could search for “CSS3 in Internet Explorer” and stumble across this page. So be careful what you tell your clients; although IE does not support these things natively, that doesn’t mean they’re impossible to implement.

And remember that anytime you need to override the initial CSS settings for IE, or if you have to use JavaScript, jQuery, or an HTC file, make sure the calls to the external resources are made using IE conditional comments. This will ensure the other browsers aren’t making unnecessary HTTP requests.

In many cases, the best solution for dealing with Internet Explorer is to let it display a less-enhanced experience. I hope, however, the above solutions provide some options for working with CSS3 when a client wants a more accurate cross-browser experience.

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

  1. 1

    amazing! this is a big help.

  2. 2

    Great post, and quite helpful if you have clients that want things streamlined across all browsers. Unless it’s key to the design, I think it’s probably not worth the hassle. The site will still work, and will look decent, which is what matters. Your methods will definitely take less work than using images and JavaScript, but since some of them have heavy draw backs, is it necessarily worth it?

  3. 3

    Post is Very nice…! and helpful.

    The sad part is still there is problem with Internet explorer….?
    In olden days web developers had to fight with IE 6 and now the new enemy with upgraded version….? :(
    what’s the difference then?

  4. 4

    Great article, it helps a lot man!
    Thanks very much indeed!

  5. 5

    Lots of things to play with here! thanks!

  6. 6

    Nice article even if the proposed solution for the rounded corners is not, in my opinion, the best.

  7. 7

    Very informative post, thanks Louis. Yet more tools for the kit!

  8. 8

    gradient css does not work in opera..

  9. 9

    very handy solutions!

  10. 10

    very usefull article – I still hope the demand for designingn websites optimized for IE7 and lower will die soon :D

  11. 11

    Who else hate Microsoft? Of course, everyone may use “filters”, everyone may write in VML, but… but why we have to write same application twice? It is ridiculous! You are talking, that you are writing websites for users, not for browsers. What are doing users? They use IE, becouse it works! What is doing Microsoft? Nothing. Becouse IE is still in use. Guys, please, break this vicious circle. I know, that clients want working website. But when you are coding your own web application – fuck IE. Fuck it hard.

  12. 12

    thanks for the article, nice and easy.

  13. 13

    Wow Thanks for completely ignoring Opera… </sarcasm>

  14. 14

    You seem to have forgotten the major drawback of using Microsoft filters: Anti-aliasing (Cleartype) is not applied to any text inside an element which has a filter applied. As a result, it looks even worse than usual on Windows machines.

  15. 15

    It would be interesting to have a poll to see how many desginers actively use CSS3 nowadays and what kind of sites you design. Its not even an option for me, as I create corporate websites. Major audience for me still uses IE. And CSS3 has too many drawbacks in IE.

  16. 16

    Wow, what a sensible response. Sarcasm!

    Do your research. There are some organisations that don’t have that choice.

    Great article, really enjoyed it!

  17. 17

    There is another new css3 HTC which emulates box shadow, text shadow and border-radius. Mention it next time if you can! I have not used it yet but found it very interesting. Link:

    Edit: It is based on Remiz Rahnaz script.

  18. 18

    You can use the gradient filter to produce rgba results.

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff); /*AARRGGBB*/

    Alpha, Red, Green, Blue

    you need to convert the alpha into hex from the 0-255 scale

  19. 19

    100% agree

  20. 20

    This is the main reason why I haven’t played around with CSS3 much. Most of my clients don’t even realize there are other browsers besides IE they can use.

  21. 21

    So what you’re saying is that there is no reason to start using CSS 3 because you’re going to have to do work arounds anyways. How IE8 doesn’t support basic styles like border-radius, text shadows or fucking RGBA blows my mind!!!


  22. 22

    100% disagree! This is not a solution to CSS3 in IE. Using this coding method is essentially developing the browser! We are web developers not browser developers. If the users of your website are using an outdated browser that doesn’t support CSS3 selectors, then we shouldn’t have to hack and essentially develop the browser for Microsoft!

    Andy Clark recently explained the reasons why we should not use this technique during the Carsonfield CSS3 Web Conference!

  23. 23

    Beautiful, i want more of these “hands on” articles!

  24. 24

    The results of the recent ‘State of Web Development’ survey show how many developers are using CSS3:

    Personally the majority of my clients all use IE, yet this has, in no way, stopped me from using CSS3 selectors!

    It is up to us as the web development community to move things forward!

  25. 25

    In all honesty, I simply cannot be bothered with all that. Fortunately I do not have clients that care too much about Internet Explorer, and am I grateful for that! But to include that level of ‘extra work’ I would consider charging a lot more because, depending on the site it is a lot more work.

    In my own projects I am perfectly happy for the progressive enhancement to shine through for anything other than Innternet Explorer. As long as the layout works I don’t really care whether it has curved or straight borders where such can’t be helped.

    But great article and I think it will certainly help a lot of people that find themselves in that position.

    However, I would like to stress my complete and utter shock and annoyance at your note that the CSS3 borders and background module *might* not support box-shadow. That hurts, really deep :-(

  26. 26

    In what way is using IE’s filter a load of extra work?! How is it “developing the browser”?!

    Yeah, this isn’t the best way we’d like to work, but it’s better then the solutions we used to use.

  27. 27

    Thanks for the great article. On text rotation, I tried implementing this myself a while ago, and (this may be my own ignorance, or a limitation of the css3 spec) I noticed that it always rotates around a center axis. While that may not be so bad, I then had trouble moving rotated text left or right. I forget the exact issue, but if I wanted a tall thin box of text rotated 90 degrees (rather than a square box) and placed preciseley, it seemed exceedingly difficult.

  28. 28

    It’s amazing how people won’t use or don’t know there is other browsers than IE.
    It’s such a horrible browser to design for and is slow to use.
    What will it take for Microsoft to drop IE, and let users of there operating system pick their own browser of choice instead of forcing there crapping browser on you.

    Recently a client of mine brought an e-commece software package which won’t work in IE8, even thought he has a warning about IE8 and a link to download Firefox, visitors of the site site using IE8 refuse to download firefox, and have said until he fixes the site to work with IE8 they won’t be back.

  29. 29

    Please, don’t waste time for IE. It’s just like the early times of color television. People who had color TV, got color. The others just kept on seeing black and white and did not complain. When they also wanted to have color, they knew that they had to buy a color TV. With browsers it is not even a question of paying for a new TV set. My God, Firefox, Chrome, Opera etc are just for free! You want color? Just get a decent browser for free! I really don’t see any client not be able to understand this simple fact. IE6 and IE7 and IE8 and I even fear for IE9, simply are all lower quality browsers.

  30. 30

    Nice article, especially the last sentence:)


↑ Back to top