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