Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

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 support1 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).

You may also be interested in the following related posts:

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 Rahnas6 of HTML Remix7 has created an HTC file8 called CSS Curved Corner9 that can be downloaded off Google Code10.

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 location11.

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 Module12, 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 Valkhof13 has written a jQuery plugin14 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 shadows15, 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 location16.

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 layout17

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 Liam18 and Matias19 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 here20

Element Rotation (CSS Tranformations) Link

CSS3 has introduced a number of transformation and animation capabilities, which some have suggested are out of place21 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 comments22, 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, please23 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.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18 #comment-456362
  19. 19 #comment-456590
  20. 20
  21. 21
  22. 22 #comment-457537
  23. 23

↑ 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

    Hian Battiston

    April 28, 2010 4:42 am

    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

    Stephen Lang

    April 28, 2010 4:49 am

    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

    Olly Hodgson

    April 28, 2010 5:08 am

    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

    don’t use images for alpha opacity ( I posted a filter to do that earlier).
    add these when you are building your site to begin with not at the end.

    I agree, going back through a project would be tiedious, but you could write a script to parse your css and add the IE fixes automatically. hm, that’s actually not a bad idea…*goes of and ponders*

  30. 30

    cancel bubble

    April 28, 2010 8:39 am

    “CSS3 is probably the hottest trend in web design right now”

    How do you figure? I’d love to see a Smashing Poll to see how many front-end devs are actually *really* using CSS3 in “real world” work and to what sort of degree. I’m not talking about just throwing in some rounded corners for the “better” browsers and letting the rest get squared corners, I’m talking really using CSS3. Doesn’t seem that feasible to me at this point.

  31. 31

    Hans Verhaegen

    April 28, 2010 10:06 am

    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.

  32. 32

    Nice article, especially the last sentence:)

  33. 33

    the box-shadow spec is only being rewritten, and possibly renamed, not completely removed.

  34. 34

    Reüel van der Steege

    April 28, 2010 6:01 am

    Great article, thanks! I’m becoming more and more interested in CSS3 and this article helps a lot to work around common MSIE problems.

  35. 35

    The Dojo Toolkit will support the transform and transform-origin properties on IE too, using the function: (click on the “rotate” box)

  36. 36

    ken the tech

    April 28, 2010 6:07 am

    just opened this page in IE6, everything works like a charm. Still a lot of drawbacks unfortunatelly.

    Thanks for sharing!

    P.S. by the way “Post Comment” button it looks ugly and doesn’t show the text.

  37. 37

    Im using IE 8 to test those css solutions but only Multiple Backgrounds works at me.

  38. 38

    Thanks for the clarification on the spec. Hope it’s not a major change.

    When you’ve written A LOT of CSS and A LOT of it contains CSS3 to make things look a little nicer, going and adding all of that extra bloat is no easy task. And for the sake of some using getting an extra bit of flair I just don’t feel the benefits out-weigh all that work.

    Personal opinion, and something I’m not implementing myself, but kudos to those that have the patience needed for testing and creating images that could be changed in the future…

  39. 39

    whose responsible this?

  40. 40

    Louis – good help for beginner. please make it, this type article more and more.

  41. 41

    Lennard Schutter

    April 28, 2010 6:26 am

    Very nice!

  42. 42

    Yes, you can use such tricks. But these solutions (with htc-files or filters) are very very slow and resource-greedy (memory, CPU usage, time). IE will hang until image from AlphaImageLoader filter loaded. HTC-files are not being cached—IE generates http-request always when user loading a page. And ClearType font smoothing doesn’t work with filters. Users will see crude text.
    So, considering this, it is highly not recommended to use such methods if you don’t really need them.

  43. 43

    Design Earth

    April 28, 2010 6:57 am

    Great article!

  44. 44

    No methods seems to get proper validation :( IE , get out of the way – Just suicide :)

  45. 45

    Friction between Microsoft and W3C.

  46. 46

    This really isn’t worth the hassle, CSS3 is for modern standards compliant web browsers, IE isn’t one of these, don’t waste your time.

  47. 47

    GreLI: My feelings are the same, however I think it should be thought through slightly more. If the situation allows, go ahead and make IE slow. If you’re required to support IE6 like I am sometimes, for design heavy sites, these are relatively good solutions. They make it “look” right, but impact performance for the user, which in the long run is a good thing. It may make another 10% see a reason to switch away to something that better supports CSS3. I’m thinking about it terms of that. Sometimes I work with designers that understand that it doesn’t have to look exactly the same in all browsers (eg. border-radius), but sometimes I don’t have that luxury, and I’ll happily impact the performance in those cases so users of IE don’t get as nice an experience.

  48. 48

    Basically this means you should use progressive enhancement. Javascript and filters will have a negative impact on user experience.

    But — thanks for the round up. Still appreciated!

  49. 49

    Everyone should be using CSS3 … the effects it produces just shouldn’t be crucial to the design.

  50. 50

    1px repeating backgrounds add a lot of load. You’re actually better off using a 10px repeating background even though the file size is slightly increased.

  51. 51

    The client should ask for their money back. There’s a huge difference between “your rounded corners might be square in IE” and “This won’t work in IE at all”. That’s completely inexcusable for a paid solution.

    This is just as bad as – if not worse than – corporate systems that are stuck with IE6 because of a single have-to-have app that won’t work in newer / alternate browsers.

  52. 52

    Everyone here talks about “standard compliant” browser and that IE isn’t one of them. Might I remind you that some parts of CSS 3 are still only working drafts and thus can’t be cosnidered to be a standard, yet? Some CSS 3 properties are not yet implemented by Mozilla or Webkit as well… As long as I have to add moz- or webkit- or filter or whatever to target every browser engine on the market separately CSS 3 is far away from prime time

  53. 53

    Yes except that users don’t know/care what CSS3 is nor will they take the time to compare somewhere else. They will simply assume that your site blows and move along.

  54. 54

    Thank you a lot! I never know before that I can set up opacity (and some others effects) for IE :)

  55. 55

    ‘What is doing Microsoft?’ – Microsoft is making M$

  56. 56

    What is the point of using these? Some of them look like they take more time than–and are as heavy as–doing things the old way. More of these gimmicks than not don’t even validate.

    Sorry, but this just doesn’t thrill me, at all. The “far away from prime time” comment is right on point. This is a waste of time, for now anyway.

    I do appreciate the authors work on this article.

  57. 57

    The problem with IE is that MS never updates it between major versions. IE8 was released about a year ago, and CSS3 wasn’t too big then. When IE9 gets released in a year or two, it will support these, but then everyone else will release new updates to support the shiny new stuff that will be added at that time, and IE will get left behind again.

    Another huge problem with IE is a lot of people never upgrade to the latest version. This is why there are still a lot of people that use IE6. So even when MS releases IE9 that will support this stuff, a lot of people will still use old versions of IE that don’t, so designers will have to rely on hacks for many years to come.

    Also, I would not consider all those CSS styles that start with -moz or -webkit to be standard compliant either. It’s exactly the same thing as using IE filters.

  58. 58

    I am using css3 on a corporate site I am building right now, and have already used it in other places on similar sites. The important part is the pitch – how you “sell” progressive enhancements and css3 to the upper management that doesn’t care about the technical stuff. The fact that its a time saver and bandwidth saver was very appealing to management. It’s all about the pitch.

  59. 59

    Another problem is CSS3 selectors (I’m speaking of that can be hardly address using a hack (would you be pro or anti IE hacks …)

    CSS3 selectors are convenient and a nice way to clean the code out of “IDs” (the half step to html5 “semantic” tags, as some may argue). Nonetheless, in no way you could use these selectors in IEx, and in no way you can use the presented hacks without modifying the HTML source code (re-addind IDs and even perhaps div elements …). This implies to have *both* the CSS source code, and part of the HTML code proper to IEx clients (sic!). We all agree this is an abnormal situation.

    Yet I think these hacks are however a must-have in the developer toolbox. Just like Peter said some comments above, clients need their money back !

    Consider : . Imagine then a freelancer/web agency/whoever who explains to his client that their brand new website (hopefully expensive…) won’t be displayed properly on 35% of their potential clients (sum of IEx market shares). The clients don’t know (and don’t have to know!) about IEx needs of hacks. They require usability, but also utility for their website. They are therefore right to ask for the maximum browser compliancy in my opinion, and we had to deliver it to them. On the client-side : what’s the point in creating a e-commerce, social web site where only 65% of the people could browse, while with hack they could benefit from 95+ % ? With some trade-offs on performance, you open a half more your deliverable (65+ => ~100% is nearly a 50% increase).

    If you do not use such hacks, you are like selling a cabriolet without a hood in a country where it rains 35% of the time …. ;-)


  60. 60

    I heard one story when a whole company didn’t used IE6. The reason was a corporative site broken in it. And when one employee said: «on my computer in Firefox site works well» the whole office migrated from IE.
    So, when site developers discovered the bug they found out what I wrote above.
    IE6 now takes only 10% on market and when more and more sites stop working within it will die as Netscape did once.

  61. 61

    Great article !! You can also take a look at this one

  62. 62

    Shadow Caster

    April 28, 2010 12:01 pm

    This is probably the most valuable IE6/CSS3 article on the internet and it’s brilliant for other browsers and an easy to follow feature list for CSS3. Thank you ever so much for this article!

  63. 63

    Yeah, especially because IE8 wont render a 1px repeating background with alpha properly. as if MS needed another strike against them. idiots.

  64. 64

    Good point. Thanks, Olly.

  65. 65

    Hey Daniela,

    I actually saw that site 2 days ago, and I had already submitted the article to SM and it had been approved. If I get a chance I’ll add it as an optional link somewhere. Thanks.

  66. 66

    And I agree with you and Andy on this. Unfortunately, clients don’t care what Andy Clark says, and they want things to look the same. These are just some options for developers to consider. I won’t be using many of them, but it’s nice to know they exist.

  67. 67


    One small thing: I’d add one more “drawback” to “Element Rotation” section.
    Try to select text in IE7 – the second line is selected “inverted”: you select from left to right, it gets selected from right to left.

  68. 68

    All rounded corners workarounds work bad from time to time. For example, with complex backgrounds (background-position), png-24 and opacity. And it’s not that important detail. I’d say often it looks better without rounded corners.

  69. 69

    first thanks for the article but….
    aaaaaargh not again workarrounds for IE – not again.

    to browser can´t deal with valid code: GO TO HELL
    we shouldnt do the same mistake twice

  70. 70

    Spoken like a pragmatic developer. I’m printing this comment out and posting it on my wall. Nice job on this article Louis, you hit a home run with this one.

  71. 71

    Amber Weinberg

    April 28, 2010 1:17 pm

    Don’t ever use any of these. Major major bloat. Why do some designers insist on making their sites look exactly the same in every browser? Games don’t look exactly the same in every console.

    Use of Prograssive Enhancement allows us to use CSS3 now and still have IE look acceptable. For example. A client of mine uses several CSS3 techniques bc their site is catered towards FF and Saf/Chrome users NOT to IE users. However, if you look at the site in IE, you can’t even tell that the rounded corners, drop shadows and certain selectors are missing…why would you add a ton of bloat to that then?

  72. 72

    Stephanie Sullivan

    April 28, 2010 2:12 pm

    I agree that it’s best to use progressive enhancement to make the page look better for better browsers. IE won’t know what it’s missing. But if you *do* have to use some of these filters (that don’t validate as people have pointed out), you should whenever possible place them into an Internet Explorer Conditional Comment to only target the versions of IE that need them. Your page will validate and you’ll keep the http requests down. And even for IE I would limit the number of these filters I used. They’re resource hogs.

    But it’s a good roundup of techniques by the author (though I prefer jQuery for rounded corners myself). I haven’t gotten box shadow to look as nice as he has (though doubt I would use it anyway, I may play to see what I’ve done differently).

    Finally, as to cost. I’ve started to tell clients that “exact” costs more money. That they can leverage time/money/page speed by serving the experience the browser is capable of to each. The more they want to force older browsers to render exactly, the more it costs. (It seems that rounded corners is the most difficult to get them to lose—thus, my use of jQuery for that—because you can’t really show a comp square and then round things.)

  73. 73

    For the past year, I have been telling my clients to use firefox, safari or chrome instead of IE as I don’t see any advantage to be using IE and be jumping through hoops just to make my design look semi-decent in IEs. If they don’t work, why stick with them? You always have a choice to walk away. It’s important to follow the standard, because it’s there to help you with rolling out quality stuff that’s going to look good now and in future browsers and new gadgets.

  74. 74

    Very helpful indeed. Thanks.

  75. 75


    April 28, 2010 7:03 pm

    this is maybe the solution i am looking for…

  76. 76

    This is nice information for web designer and developer……

    Even though CSS3 does not support IE browsers,

    Which you gave some information very useful….

    Thank you so much….

  77. 77

    An alternative solution:

    $br = strtolower($_SERVER[‘HTTP_USER_AGENT’]);

    if(ereg(“msie”, $br)) {
    header(“location: upgrade_or_GTFO.php”);
    else {
    header(“location: site.php”);

  78. 78

    That’s it why i hate so much to IE !!

  79. 79

    You’re right that it’s not feasible to use CSS3 extensively in real-world projects, but that doesn’t mean it’s not the hottest trend in web design. I suppose I could have limited the statement to “within the design community” and on niche sites, but I still think it qualifies as one of the hottest trends, regardless of limitations.

  80. 80

    Thomas McGee

    April 28, 2010 9:22 pm

    I totally agree. There’s no real point in putting that much time and bloat into implementing CSS3 effects into IE sites when there’s no telling when they’re going to run a major update and break them all. CSS3 is nice, but if my client was that concerned with having rounded corners, call me crazy, but I think I’d just make them in photoshop :)

  81. 81

    Very nice article.
    Anyway i stick to and stopped using MS-only-properties. For browsers not supporting CCS3 there will be a fallback version without rounded corners, rgba etc.

    I don’t give op hope that MS will finally make IE standard compliant and support all the beautiful CSS3 features and then we all have a big party :)

    Until this heavenly day i will go on using
    I even thought about * html { display:none; }

  82. 82

    That’s an interesting piece of information. Has anyone more on that? What’s the best ratio then? 10px?

  83. 83

    @roundced corners in IE – I’ve worked with the file, but there’s one significant problem there.

    When the div you’re editinig has background repeating for example in x-line, the htc file makes it repeat in the whole div…

  84. 84

    Not feasible? Surely using progressive enhancement and tools such as modernizer you can “pragmatically” deliver warranted user experiences across all browsers still in a time-saving real-world scenario. Sold properly, in business terms, CSS3 is time-saving as not marrying all browsers designs to look the same – saves time and money. The mozilla, web-kit and opera filters are built based on and post W3C standards – that is the important part and which end users opens all browsers up and puts a site side by side? More importantly than that CSS3 is not a trend, rounded corners may be a trend, but CSS3 is the next specification of the technologies we as developers require to build sites – and anyone who suggests waiting for it to be a standard is not in the real-world either.

  85. 85

    There is almost always a choice!

    True, if an outdated inhouse application relies on the underlying support of IE6, the end-user has no other option.

    But: given the case that the user can at least download files from the internet, he or she can give portable apps such as ‘Firefox Portable’, ‘Opera USB’ or ‘SRWare Iron’ a try. These do not need administrative privileges or installation.

    Regards, Jan

  86. 86

    these help me..

  87. 87

    Damian Poole

    April 29, 2010 2:34 am

    I work as an internal web application developer for a large UK corporate which only uses IE6, while I would consider anything like this for my personal projects these techniques will help greatly with keeping me sane while developing specifically for IE6

  88. 88

    As a strong stadards supporter may I ask you to add CSS3 compliant declarations to your examples? For instance:

    .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);

    WILL break in the future and it breaks now in Opera. Because CSS3 does NOT have -moz-box-shadow or -webkit-box-shadow attributes. Please add box-shadow. Other bits should be fixed too, otherwise your article is misleading and will break in future browser versions and Opera. You may dislike Opera like many does, but promoting CSS3 and publishing broken CSS3 code shows your unprofessionalism.

  89. 89

    Vaclav Elias

    April 29, 2010 3:38 am

    Nice article but it’s good to see behind the curtains.. check this long video–HTML-5-and-Internet-Explorer-9/

    You might see except many things what the problem is in the CSS3 representation in differnet browsers..

  90. 90

    The following code works in mozilla and crome… how to do the same in IE using css
    can anyone help, plz..


  91. 91

    box-shadow does not work properly in IE7 & IE8, the text seems thinner! Ironically IE6 renders normal

  92. 92

    i love how an advert for ie8 appeared above this post on the homepage.

  93. 93

    This is horrible! These work-arounds / bug fixing should never-ever be applied. By doing so, you comfort users who use a a browser wich died at the age of 8 and suffers from MAJOR security leaks. Please people, dont cure the dead. Just update.

  94. 94

    I’m not an expert on CSS3, but from my understanding of the CSS and CSS2 standards, -[vendor]-[extension] is valid. The leading ‘-‘ is used to tell you that this is a non-standard, vendor specific extension and that if you do not implement it you can just ignore it. The problem in the past is that MS has not been using this convention, so it is encouraging that IE8 does use -ms- (e.g. -ms-filter instead of just filter).

    As I am in a shop that still uses MS-IE6 because it has ‘legacy’ applications that it bought from extinct 3rd party suppliers and it would be too expensive to replace just for the fun of getting the latest shiny toy; I cannot agree with those who are so vehement about forcing people to abandon IE6. If it ain’t broke, don’t fix. So, yes this is a list of ‘hacks’, but it does enable us to give the customer what he wants without breaking his operating model and, no you are not being compelled to use them. Be aware of what is possible and use them wisely and appropriately.

  95. 95

    Lovely code snippets having been looking around for the same since months.. finally I got ’em. Thanks a ton. But still have to give a try if every of the above works as said…

  96. 96

    Element rotation in IE actually allows for more than just four states.

    By using matrix sin and cos values OR by using floating point values between the states you can achieve this.

    #rotate {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    #rotate {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);


    For RGBA values in the IE browsers you can achieve an RGBA background without having to use a PNG Image.

    All that you need todo is copy the code from the Gradient Filter and set both the start and end colours to be the same:

    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#AARRGGBB’, endColorstr=’#AARRGGBB’);

    AA is the alpha opacity value (0-FF as hex) … (so hex / 255 will give you 0-1 opacity value).
    RR is red in hex
    GG is green in hex
    BB is blue in hex.

    This way you don’t have to have an additional HTTP request and you also don’t have to include a PNG Fix solution for IE6.

  97. 97

    Very nice collection of techniques brought together for a valuable reference. Thanks for publishing this article.

  98. 98

    What about Opera? Are these compatible? Do -moz- and -webkit- prefixes validate CSS?

  99. 99

    George Palmer

    April 29, 2010 7:51 am

    Great list. Bookmarking this for later reference. One day hopefully in the not too distant future M$ will get their act together and save us all the headaches.

  100. 100

    >Amber Weinberg
    (..)A client of mine uses several CSS3 techniques bc their site is catered towards FF and (…)

    Toward FF? Really ? Tolltips are unreadable in FF. Ironicly – in IE they looks great!

    Oh! By the Way. In IE7 drodown menu is moved to the right so it’s unclickable…

  101. 101

    Great article. I’ve been looking for something like this for a long time.

  102. 102

    Trying to persuade an IT department of a large company that you don’t need to support their choice of browser but instead they need to roll out a USB stick with a browser on to every user of the system isn’t going to be a plausible option really… is it?

    The best we can do is educate prospective clients to the benefits of updating their browsers, let them weigh the extra cost of slower development for an outdated browser against rolling out updates and show them some hands on advantages from adopting newer tech.

    If they still want you to make the system work for IE6, then either you make it or you pass up the job. I’d like to see your stress levels as you explain to them the joys of needing a dongle to effectively use your system.

  103. 103

    In a perfect world where people took heed of your advice without question that would be the way, but if that was the case you could just go with:

    header(“location: donate_large_sum_of_money.php”) ;

    You can never assume people can be bothered to upgrade their browser just to see you site if your site has any serious purpose whatsoever.

  104. 104

    Nice article… it’s a shame we have to use this filter stuff to fallback with a lack of CSS3 support but with a progressive enhancement ethic it’s not the end of the world to use a bit here and there.

    It does seem like though with a bit of jQuery we could get javascript to do the work for us in converting the rules. Doesn’t seem too hard… if you have the time.

  105. 105

    Using didn’t stretch with a liquid layout. bummer

  106. 106

    I like MS’s solution with respect to using the filter property. Its more modular. CSS is a standards based set of semantics which is great but think about the future. As a software developer I can see that adding the ability to ‘sub out’ to a set of external libraries is far more ideal than relying on what you want to make its way into an established convention. For example, technically, there’s no reason you can build your own filters to use in CSS that do a bunch cool stuff. For example, automatically register a click through when a certain style loads or set a filter for a certain div that loads a video into the section rather than using a flash video component which requires a whole other set of configurations and conventions specific to that architecture. All in all, MS has always been a great platform for developers, far better than MacOS and far more understanding of the programmer approach to things than the W3C.

  107. 107

    My machine never got virused until I moved to firefox which opens all sorts of holes with its plug in and add on architecture. Most of it happens in the loose trust FF has for flash applets.

  108. 108

    Aux, the missing “box-shadow” property was just an oversight. The article isn’t about standards-compliant code, it’s about getting the examples to work in IE. Technically speaking, the “moz” and “webkit” properties make it work fine in FF, Chrome, and Safari, so the other one isn’t needed for the purposes of this example, but yes, I’ll correct that when I get a chance, thank you.

  109. 109

    This is good — thanks, Matias. I think someone else also mentioned the RGBA thing. I’ll take a look at those methods and maybe make a few additions to the article. Thank you.

  110. 110

    Roshan, that code won’t work in IE. Please see the section in the article under “Rounded Corners”.

  111. 111

    “You really only need the second line, which works in all three versions of Internet Explorer.”
    This is partially incorrect. While IE5 to 8 support filter, IE9 will not. It only supports -ms-filter, and you can see this by running the IE9 developer preview. I suggest that anyone using IE filters uses both filter and -ms-filter

  112. 112

    Thanks for this, I’ve been aggravating over IE 6,7,8 for the last few weeks with all the css3 stuff I’m trying to do.

  113. 113

    Great post !!!

    I love this material. I’m always thankful to smashing magazine who brought all in one solution to one plateform.

    again Thanks

  114. 114

    Thanks for this.. Great Solutions for a terrible mundane problem! Smashing mag rocks…. Microsoft, get your act together!

  115. 115

    Probably the best IE border-radius solution I’ve tried is Drew Driller’s “DD Roundies”.

    It deals really wise with background images, background position, etc. There are some issues with IE 8 sometimes, but you always can make it behave like IE 7 with the meta compatibility mode ;)

  116. 116

    Hey thanks a lot for such an article, I was looking for such one.
    Thats gonna help me a lot now while using CSS3.

  117. 117

    not the last line..but the whole thing..:P

  118. 118

    Amazing article. Sums up many of the things I’ve been searching for this week. Most useful article to me.

  119. 119

    Very helpfull article! THX!

    The first example of multiple backgrounds doesn’t work.

  120. 120

    Great article, big help. It’s a pity that IE’s capabilities are so limited (e.g. rotation in 90deg steps). However I could use some tricks.

  121. 121


    May 1, 2010 3:08 am

    very good article indeed :-)

    I don’t know if any commenter mentioned Opera 10.50 already, but this version adds some nice css3 functionality i.e. multiple backgrounds, border-radius, box-shadow, … . maybe the author of can update his article?!

  122. 122

    Dr.Babak Zawari Has an persian article on this subject in
    آقای دکتر زواری مقاله ایی در این باره نوشتن که در سایت دات نت سورس میباشد

  123. 123

    Sunny Kumar

    May 2, 2010 8:05 am

    Very Useful Post. Thanks for posting this ! Smashing magazine Rocks :-)

  124. 124

    I’d also like to know this
    (btw what happend to the forum, was jsut on my way to ask there but couldn’t find it)

  125. 125

    The first example of multiple backgrounds only works in FF3.6+, Chrome, and Safari. The second example does not work in any of those browsers, but only works in Internet Explorer (all versions).

  126. 126

    Its by far not that simple! I personally know somebody who works at a company that sticks to an older IE-browser (6 or7, don’t know it exactly) because a software they use only runs with this browser. So the employees simply just can`t do anything about it and use IE to surf. Besides that many people don’t eben know what a browser is, how to change it or why they should use another one. IE will be there quite a few time and for the same amount of time it will be essential to support it, if only at a very basic level.

  127. 127

    Tomas Vrana

    May 3, 2010 5:23 am

    Indeed nice, thanks. but while checking that in bloody v.6, the fellow browser completely hells up your layout. Solutions stays OK. Its probably clear, that there can’t be much visitors using that crap, but … you know.))

  128. 128

    Your comment does not validate :)

  129. 129

    Hans Verhaegen

    May 3, 2010 12:40 pm

    Well, people who are “forced” to use an old IE, because they have to use some ancient piece of software, can continue to do so. But they will have to realize that they will see the evolving web in ‘black & white’ because of that. We cannot turn off the color or stop evolution of web techniques because of a couple of companies that are stuck in the middle ages. And most people at home already switch to newer browsers anyway. Through friends, automatic updates (IE) or the well known IT nephew…

  130. 130


    Thanks for offering this option. I’ve updated the article to use your solution instead. Thanks!

  131. 131

    Nick Milon

    May 4, 2010 1:24 am

    Nice article Luis – it along with all relative comments here addresses all the issues related to the subject.
    My small contribution :
    a) There is an easy work around for Anti-aliasing (Cleartype) problem when filter is applied mentioned by Olly Hodgson: just add a position:relative rule for this element i.e. .myFilteredDiv p {position:relative} you can see how it works if you visit with ie this page and check the title bar or the footer.
    b) Chrome now supports standard CSS3 “border-radius”. So no need for “-webkit-border-radius” if you target chrome. It works on 5.0.342.7 beta Linux still I have to test for other OS/version combinations.

  132. 132

    Suhel Tanveer

    May 4, 2010 3:05 am

    zzz… Your page doesnt work in ie6

  133. 133


    May 4, 2010 3:44 am

    Great article, and I agree that rounded corners, drop shadow, etc are not neccesities if the website is large and it demands a lot of extra work, but what worries me is the amount of websites that look chaotic in IE6. It seems to me that designers/developers are completely giving up on IE.
    I hate IE too, don’t get me wrong, but websites that clients pay for should be functional and readable in IE6 as well, too many people are still using this retarded broswer.

  134. 134

    It the rotation for IE is applied with Matrix, instead of BasicImage, you can rotate with any degree from 0° to 360°.

    For the examples visit:

  135. 135

    Please FIX a ROTATION chapter in IE.

    You can rotate element using any angle, using CSS filter, but you need to use a Matrix for that.

    Read more here:

  136. 136

    Great article.

    You could let all the CSS3 slide for IE but if it’s a personal portfolio for example, you want to show off to as many potential customers as possible.

  137. 137

    it’s nice , thanks.

  138. 138

    Yes, I learned that after the fact. The matrix thing seems very complex to learn, but fortunately seems to have implemented it into its code generator, so developers can use that. I’ll put a note in the article to indicate this. Thanks.

  139. 139

    deenendra pal singh

    May 7, 2010 4:20 am

    i want rounded corner in form input fields.

  140. 140

    Great Post.

    I really like the Multiple Backgrounds CSS for IE.


  141. 141


    May 8, 2010 4:10 am

    awesome, nice solutions

  142. 142

    amazing! this is a help in coding css3
    thank you so much

  143. 143

    I’m so sick of all of this.

  144. 144

    thanx u so much for ur help.. this is gr8 help to me

  145. 145

    Mike Schore

    May 23, 2010 7:17 am

    Excuse me, CSS3 has not formerly been adopted so why are you beating up browser developers? While I appreciate the effort that has been displayed here to start forcing people into a CSS3 mindset when it hasn’t been finalized is not a prudent approach for production websites. Until ALL browsers implement a feature I really don’t feel it should be used. This is starting to remind me of the browser wars of over a decade ago. When will we learn? For those of us that was there, it was the browser that tried to go its own way that lost (Netscape).

  146. 146

    IE ………..? ?

    Nice Article !!!!!

    G8 for IE8

  147. 147

    After messing around for almost an hour with, I’m giving up. It’s a buggy hack that doesn’t work nearly as flawlessly as the rest of the (great) advice in the article.

  148. 148

    I am hoping that IE9 will have CSS3 so we might be okay. The preview says it does well it says it can do border-radius so that’s a start… Only, if you view a website using border-radius with the Preview it doesn’t seem to yet… But there is hope…

  149. 149

    just when you thought css hacks were done, here we go again..

  150. 150

    Muhammad Yasin

    June 2, 2010 12:17 am

    I love Rounded Corners (border-radius) and Gradients hack for IE. Its commonly used properties but I have problem I some body there to help me. when I using both hack simultaneously for one div it work fine on mozilla but not IE in any version div rounded but gradient hack property make separate div in IE that overlay rounded div. Following is my code how I written.
    #sandbox {
    padding: 20px;
    width: 400px;
    font-size: 16px;
    border:#006600 1px solid;


    .box_round {
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3+, Chrome */
    border-radius: 12px; /* Opera 10.5, IE 9 */
    behavior: url(;/* IE 6+ */


    .box_gradient {
    background-image: -moz-linear-gradient(top, #000000, #CCCCCC); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(1, #CCCCCC)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#000000′, EndColorStr=’#CCCCCC’); /* IE6,IE7 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#000000′, EndColorStr=’#CCCCCC’)”; /* IE8 */


    <div id=”sandbox” class=”box_round box_gradient”>
    <abbr title=”Cascading Style Sheets Level 3″>CSS3</abbr>, please
    This element will receive inline changes as you edit the CSS rules on the left. Enjoy


    Please some body help me

  151. 151

    Thank you for the post! This will save me tons of time with IE.

  152. 152

    BTW, I’m using a theme right now that, apparently, when viewed in IE6, won’t even show the “post comment” button at all. So IE6 users (they’re still out there, forced to use IE6 by their IT departments) cannot comment on my site. II know this isn’t a help forum but if anyone here has a fix idea, the theme is called The Erudite and is for WordPress. Thanks. I’ll check back here. Desperate.

  153. 153

    Muhammd Yasin

    June 11, 2010 11:22 am

    No one there to solve my problem

  154. 154

    there’s a simple solution I don’t mind :)

    ask for more $$$ ;)

    If they want it they pay for it as simple as that :D

  155. 155

    Here’s something I don’t get. Why is Internet Explorer never updated?

    Firefox, Chrome and Safari all seem to get regular updates that add support for new features every couple weeks/months.

    How come Internet Explorer never seems to get updated? Is it too much to ask to get border radius, gradient support that doesn’t make the fonts aliased and proper box-shadow?

    Every other major browser supports those features, I don’t get why Microsoft doesn’t update their browsers to fix some of those flaws like the other browsers are doing. Firefox didn’t support gradients until 3.6 so not everyone gets it right on their first try but at least everyone else is trying to improve while Microsoft is holding the Internet back.

  156. 156

    Andreas Kuckartz

    June 19, 2010 10:09 pm

    A correction: box-shadow was recently (re-)added to the CSS3 Backgrounds and Borders Module!

  157. 157

    Rounded Corners (border-radius) : very interesting article but
    I don’t see any demo on the page you link with :
    There is only a grey form. That’s all.

    I tried this hack for IE but it doesn’t work :-(( :
    border:2px solid #FF0000;
    border-radius:30px 6px;
    -moz-border-radius: 30px 6px;
    -webkit-border-radius:30px 6px;
    -khtml-border-radius:30px 6px;
    behavior: url(CSS/;
    width: 780px;
    height: 570px;
    and a separate htc file :

    Thanks for help.

  158. 158

    very Nice……..

  159. 159

    IE6 market penetration continues to drop, month after month. It has dropped about 10% per year, since the introduction of IE7.

    As of this month, June 2010, down to about 7%.

    If the trend continues, IE6 will be gone well before Microsoft drops support for it in 2014!

  160. 160

    That’s right, DD which Hristo mentioned are much better.

  161. 161

    it nice article good job mate i am finding a round corner css solution in ie any one can help me . how to one image call and make round corner .
    any one connect with me and share your valuble ideas.


  162. 162

    here the javascript code i use for ie rotation from 0° to 360° :

    [Based on the css/javascript code from the following clock : “” … but completed for ie compatibility]

    //Function to convert from degree to radians
    function degToRad (angle) {
    angle = (angle/ 180) * 3.142;
    return angle;

    //Function to rotate the picture
    function rotateElmt(obj, angle){
    //Section reserved for ie
    if (Prototype.Browser.IE){
    //Convert the angle to radians
    var rad = degToRad(angle);

    //Calculus of the matrix values used by IE
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);

    //We get the picture element
    var Target = document.getElementById(obj);
    if(Target) {
    //filter attribute = “progid:DXImageTransform.Microsoft.Matrix();”;

    //Picture rotation under IE
    Target.filters.item(“DXImageTransform.Microsoft.Matrix”).SizingMethod = “auto expand”;
    Target.filters.item(“DXImageTransform.Microsoft.Matrix”).FilterType = “bilinear”;

    Target.filters.item(“DXImageTransform.Microsoft.Matrix”).M11 = costheta;
    Target.filters.item(“DXImageTransform.Microsoft.Matrix”).M12 = -sintheta;
    Target.filters.item(“DXImageTransform.Microsoft.Matrix”).M21 = sintheta;
    Target.filters.item(“DXImageTransform.Microsoft.Matrix”).M22 = costheta;

    var imgWidth = 80;
    var imgHeight = 80;

    var X0 = imgWidth/2;
    var Y0 = imgHeight/2;
    var W=imgWidth;
    var H=imgHeight;

    if ((angle>360)||(angle=0) && (angle=90) && (angle=180) && (angle=270) && (angle<360)) {
    W = Math.abs(imgWidth*Math.cos(rad-3*Math.PI/2) + imgHeight*Math.sin(rad-3*Math.PI/2));
    H = Math.abs(imgWidth*Math.sin(rad-3*Math.PI/2) + imgHeight*Math.cos(rad-3*Math.PI/2));

    var X1 = X0 – (W/2);
    var Y1 = Y0 – (H/2); = X1 + "px"; = Y1 + "px";

    else { //For every other browser…
    $(obj).setStyle('transform: rotate(' + angle + 'deg)');
    $(obj).setStyle('-moz-transform: rotate(' + angle + 'deg)');
    $(obj).setStyle('-o-transform: rotate(' + angle + 'deg)');
    $(obj).setStyle('-webkit-transform: rotate(' + angle + 'deg)');

    … then call the rotateElmt function

  163. 163

    I’m a bit late, but – try putting the url to the .htc in quotes, might not be the problem, but IE is just so absurd it might work :) ugh…don’t you just hate hacks…


    and try adding a postition: relative; for the anti-alias to work.

  164. 164

    They moved to .com

    Worth using, yeah, it’ll slow down IE, but who cares, you’ll be riding Chrome or Safari…

  165. 165

    Thank you …..
    very nice solution………..

  166. 166

    There is a way to accomplish text shadow in all browsers via pure CSS.

    .shadow { text-shadow:#e2e2e2 1px 1px 0px; /* Gecko browsers */ -ms-filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, color=#ffffff, positive=1); /* IE v.7+ */ filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, color=#e2e2e2, positive=1); /* IE v.6 */ }
    .shadow:hover { text-shadow:#e2e2e2 1px 1px 0px; /* Gecko browsers */ -ms-filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, color=#ffffff, positive=1); /* IE v.7+ */ filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, color=#ffffff, positive=1); /* IE v.6 */ }
    .shadow { zoom:1; /* IE6 Fixture */ }
    /* EOF Crossbrowser shadow */

  167. 167
  168. 168

    thanks, you saved me

  169. 169 works well, but issues with z-index one the page renders.

  170. 170

    Great article! It’s going to prove very useful.

    However, not for the first time, I’m thinking “Friends don’t let friends use IE”. Maybe the simplest solution to the Microsoft problem is for us all to become anti-IE evangelists! Over the last decade or so, Microsoft has shown a high level of contempt for all attempts at web standards, and has continued to peddle it’s substandard wares. Perhaps an elegant solution would be for web designers to place a footnote on their pages stating that the page is being viewed in a crippled form (because of IE), and recommending that the viewer get themselves a “real” browser ;) ;)

  171. 171

    I have created an updated HTC file to allow better CSS3 support in IE, see the demo page here: I added improved border radius, box-shadow, rgba and gradients.

  172. 172

    The eternal fight agains css and ie. Someones loves firefox or google chrome, but always need to work on ie x) . Pretty nice information!

  173. 173

    Once again, Smashing to the rescue! Thank you.

  174. 174

    You haven’t got a fucking clue.

  175. 175

    Thanks a lot,that was a big help :)

  176. 176

    GR8 Post!!!!!!!!!

    can anyone let me know any css3 for rounded corner for IE??

    Thanks in Advace….

  177. 177

    This is such a helpful article full of great information. Thanks for posting!

  178. 178

    I’ve got a problem. This is my code:

    input.logowanie {border:#dfe4e6 1px solid; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; margin-bottom: 16px; width:171px; height:25px;}

    works ok, but under IE the corners aren’t rounded. When I ad the behavior: url(; to it, the color of the border disappears. Can someone help me with this.

  179. 179

    Dariusz… its explained above.. but your best bet is to convince all your friends and their friends and their friends.. IE is no good.. and upgrade to a better browser .. anything is fine but…..

    unfortunate to know IE is so behind in the times compared to other browsers .. even off the wall~ little browsers provide better enhancements.. so sad…

    This is an excellent article…a lot of info here and compiled well from all the other IE tricks I have seen to make their browser a better browser like it should be… pretty sad you have to “jerry – rig ” it all to make it look nice…

    this does not answer the bugs i am experiencing with hover and link issues ..textarea errors the ~progid:DXImageTransform. causes…
    downloaded the new IE 9beta.. .. still garbage in my opinion!

  180. 180

    Amen to that!

  181. 181

    Update to IE9 and use the “border-radius:?px;” for now

  182. 182

    Nice page.
    However, is this me or.. the IE stuff does not work at all
    and create error in IE8 console ( Argument non valide.)

  183. 183

    That’s a the singular exception to the rule though. At my last company, all the user *wanted* to switch to Firefox or Chrome, but IT wouldn’t let them (some good, some bad reasons). Unfortunately this is the reality we live in, most businesses simply don’t make sweeping changes like that on the norm.

    But beyond that, *purposely* allowing performance to dwindle in IE in the name of getting users to switch is just wrong. Wrong to your client and wrong to the user. If you built me a website, and I found out that you were letting my customers potentially go to the competition because mine wasn’t as fast simply for some rounded corners, I wouldn’t come back to you for anything. As a user, I’m going to use the browser I want, period. I know people that refuse to switch from IE. It’s just what they like.

    Believing that you can change someone’s mind by destroying browser performance is a little absurd. Most users won’t even realize that the situation is limited IE and just think it’s your site. Again, I definitely feel you should relook at your strategy and figure out other ways to get users to adopt.

  184. 184
  185. 185

    Nice CSS Hack!!
    Thank you.

  186. 186

    Thanks a lot for this solution… I have implemented these solutions…

    Thanks for post.


  187. 187

    Please try to make it with downloadable examples zip file.

  188. 188

    Here’s something I don’t get. Why is Internet Explorer never updated?

    Firefox, Chrome and Safari all seem to get regular updates that add support for new features every couple weeks/months.

    How come Internet Explorer never seems to get updated? Is it too much to ask to get border radius, gradient support that doesn’t make the fonts aliased and proper box-shadow?

    Every other major browser supports those features, I don’t get why Microsoft doesn’t update their browsers to fix some of those flaws like the other browsers are doing. Firefox didn’t support gradients until 3.6 so not everyone gets it right on their first try but at least everyone else is trying to improve while Microsoft is holding the Internet back.

  189. 189

    same problem

  190. 190

    Wonderful content. It’s really helped me out. Thanks to the author who written this blog. Where can i find your other blogs.

  191. 191

    these are HTML solution of my life

  192. 192

    you can use htc file for rounded corner in IE

  193. 193

    Some awesomeness I found out while searching for css3 solutions for IE7&8. This one is just for border radius though –

    Just adding the script worked like a charm for me. It automatically rounded off the radius for every selector which had a border-radius.

  194. 194

    I came up with a solution to get IE to display stepped gradients, it may be a little unwieldy but I created div for the stepping that are only rendered for IE.

    The header looks like this:

    <!–[if IE]>
    <div class="headertop"></div>
    <div class="headerlower"></div>
    <div class="headermain">

    The Style sheet is summarised here:
    background-image: linear-gradient(top, #8b1c62 50%, #FFFFFF 100%);
    background-image: -o-linear-gradient(top, #8b1c62 50%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(top, #8b1c62 50%, #ffffff 100%);
    background-image: -webkit-linear-gradient(top, #8b1c62 50%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(top, #8b1c62 50%, #FFFFFF 100%);

    background-image: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0.50, #8b1c62),
    color-stop(1.00, #FFFFFF)
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b1c62', endColorstr='#ffffff');
    height: 150px;
    z-index: 1;
    height: 50%;
    z-index: 2;
    height: 50%;
    z-index: 2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b1c62', endColorstr='#ffffff');
    position: absolute;
    width: 100%;
    top: 0px;
    height: 50%;
    z-index: 2;
    height: 50%;
    z-index: 2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b1c62', endColorstr='#ffffff');

    Hopefully this helps someone else trying to achieve the same effect.

  195. 195

    Individual Rounded Corners are not working on IE 8 pls help me

  196. 196

    All you’re saying is basically forget about 40% of your clients’ visitors. Nuff said.

  197. 197

    Aniko Erlinger

    November 11, 2011 5:04 am

    I can really recommend It enables IE6-8 to support border-radius, box-shadow, border-image, CSS3 Backgrounds, Gradients, RGBA Color Values. I have just tried it on a website I am building. Nice.

  198. 198

    mayur patoliya

    November 18, 2011 2:05 am

    it is very best website……..for knowledge only……..

  199. 199

    Daniel Martiniano (Brazil)

    December 15, 2011 8:23 am

    gradient also works on IE9. Great post!

  200. 200

    Post is very helpful any single js solution for all css3 properties for IE.

  201. 201

    Great stories, maintain them coming :) This is the 1st time i have commented, b¨´t i have been lurking for a whilst.

  202. 202

    Attitude change of developers is needed.. Show the differences instead of fixing Microsoft browser problems, it is a problem of MS not yours! MS is not god. I also drop the hacks for IE8 and lower, putting a little message on top of the document that says that te browser doesn’t support modern standards, with a link to information that shows and explain the differences (with examples). No nice shades and other ‘fancy’ things in IE8 or lower, but still working. Stop the hack bullshit, people must see that there is ‘another world’. Upgrade to IE9 (when possible) or better use another browser, it is FREE for god sake! We must go on, skip the MS bullshit, show the differences to users. Better for us, better for the customer, better for the internet, better for all. Concentrate on new things instead.

    Don’t be afraid to loose customers, that is microsoft commercial talk/bullshit. We as developers can change the IE direction by stop supporting it. Users may ask why it is not working, that’s a good thing. Don’t be a slave of the commercial free stuff!

    And very important for you as developer, do not frustrate yourself and skip this piece of crap. Don’t wait for the next better supertrouper awesome release of MS. Also IE10 will not bring satisfaction, forget it and let your visitors know that IE does not support YOUR website (instead of that you not supporting IE).

  203. 203

    Thanks! this was the fix I needed for a gradient background in ie.

  204. 204

    Thank you very much for your post. It’s really useful.

  205. 205

    bhola sharma

    April 12, 2012 3:04 am

    gr8 ! Post is very helpful


    Bhola Sharma

  206. 206

    Hi people.
    I have an issue with IE8 and multiple backgrounds.
    What should I do with this code:
    background: url(‘../images/sabao_x_top.gif’) repeat-x top left,
    url(‘../images/sabao_x_foot.gif’) repeat-x bottom left;

    How do I “translate” it for IE to show him the 2 backgrounds?
    Thankz people.

  207. 207

    Use background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));

  208. 208

    It looks you can’t make a gradient, based on RGBA-method colors to give it a transparent view.

  209. 209

    Yaron Gilboa

    July 11, 2012 12:20 am

    Regarding Transparent BG:

    i’ve found that using a bg image, where the image is 1×1 pixels with transparency is a better solution, since using the filter style affects also the child elements.

    tested on ie8

  210. 210

    Good article louis, We can use css3 properties with out filtering and htc script in IE low version browsers ? if is it possible…

  211. 211

    very helpful

  212. 212

    Nice article. I’ve been looking for a way to do these sorts of things in IE if a customer *really* insists that they need to work in IE but personally, I always tend to convince people that you should design for proper browsers and not harm the user experience of people that user proper browsers just to cater for the minority of users that are still stuck in the dark ages (whether through their own fault or the fault of their lazy IT guys who lock down the system and only let them use IE7). I mean, as long as it’s usable (readable, interactive, functional), why go the extra mile to add rounded corners, gradients, alphas, bells, whistles, etc? If it makes it slow, fat and the css doesn’t validate, is it worth it?

  213. 213

    The last line is the best ;)
    No better way to make people upgrade their browsers then to serve up a “less enhanced experience.”

  214. 214

    Nice! this really helped :)

  215. 215

    Cristopher Dino

    November 23, 2012 12:25 am

    If you are using wordpress, you can try this plugin

    It implements css markup that support CSS3 “border-radius( Rounded box corners )”, “box-shadow( Dropdown/Inner Shadow )” and “linear-gradient( Gradient background )” in IE versions 6 to 9

  216. 216

    thanks.. this really helps..

  217. 217

    I am using filter for applying css3 in IE-8 to set background-size but when i set background size then background position position does not work
    Please help me to set background position with background size in IE-8


  218. 218

    Steve Tegtmejer

    February 7, 2013 11:47 am

    If you’re looking for border-radius, box-shadow or linear-gradient in IE, you should take a look here – great tool for those tree options, otherwise: :O)


  219. 219

    IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

    -moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

    Furthermore: don’t forget to declare your IE coding is ie9:

    Some lazy developers have . If that tag exists, border-radius will never work in IE.

    and you can use this method for border radius:

    border-radius: 20px 20px 20px 20px;
    /*top right down left*/

    -moz-border-radius: 20px 20px 20px 20px;

    -webkit-border-radius: 20px 20px 20px 20px;

  220. 220

    The box-shadow, gradient and rotation don’t appear in IE10 on Windows 7.

  221. 221

    Hello Louis,

    this post is awesome. I really love to read this post.

  222. 222

    Deepak Kumar

    April 8, 2013 9:48 am

    Thanks ,,,,,,,
    That’s what I am searching for ……..
    Once again thanks a lot for this precious knowledge.

  223. 223

    That was indeed a helpful article.How to go about translation in ie6 and get a perfect circle instead of rounded edges??

  224. 224

    Rinku Kharkia

    June 28, 2013 11:37 pm


    I have a query related to css3 in IE7 & IE8. I have used file for this and it is working but the main issue is that after some day these file stop working. I have to replace ‘pie’ file with new one and after some day same problem again generate and so on.

    So please please please, suggest me what I have to do to resolve this problem.
    Its sucks me…..

  225. 225

    Thanks author and all, very nice article and comments useful.

  226. 226

    after seeing too much draw backs in every style above and felt depressed with them

  227. 227

    But so many people using IE 6, while this htc can’t work for linear-gradient transparency that I tried. In Indonesia for the lowest version of IE is 6 that so people used in majority.

  228. 228

    I cant seem to make the full website have a background AND a div have a background…


↑ Back to top