CSS3 is magical like unicorns. I would say the horn of the unicorn is its ability to be replicated by some of the filters in IE. The horn is majestic, but painful when applied to sensitive areas. Filters in IE give us a way to replicate some of the power of css3 without javascript and without images. However, filters come with their own problems. The most common problem is probably the equivalent of overflow: hidden whenever a filter is applied in IE6-7. Another, is mixing a gradient filter with border-radius in IE9.
IE9 is a major improvement compared to its predecessors, but does not yet support css3 gradients. It does, however, support border-radius. A problem arises when you apply a filter to an element with border-radius. The filter overrides the border-radius and you lose your rounded corners. You should probably think of a filter as a commanding predator. It will do stuff, but it will take over and kill puppies.
Another workaround is to use SVG to create a gradient background image. This has the advantage of being supported in IE9 and the css is not too long or difficult. SVG does have more flexibility compared to a static image created in photoshop, but they take time to create. So, for those on the go, we may have a quicker solution that does not require any extra files.
When in doubt, add a wrapper.
You can fix the IE9 problem by simply wrapping your gradient and given that the border-radius instead and applying overflow: hidden. The overflow: hidden is present in IE6-7 due to the filter as stated previously, but will still only be applied in those 3 browsers in the given example. If you have a dropdown or need some equivalent behavior where overflow is needed, the best solution may be to have another div outside of the wrapper, but absolutely positioned on top of it. Border-radius will still not work in IE6-8, but if you care about that, you’ll need to look into javascript fallbacks or using images.
If you look at the HTML, you’ll notice I’ve added an IE conditional comment for the wrapper. I only did it that way to make the fiddle. I recommend using Paul Irish’s IE Conditional Comments, a conditional stylesheet, or css hacks if absolutely necessary.
Tip: position:relative or absolute will cause problems when combining overflow and border-radius, so best stick with static and use something like the wrapper div in the example for positioning relatively or absolutely.
Update: The original solution did not clip correctly in Opera. This post has since been updated. Let me know if you see any more problems!
