IE9 border-radius and background gradient bleeding

Question

IE9 is apparently able to handle rounded corners by using the CSS3 standard definition of border-radius.

What about support for border radius and background gradient? Yes IE9 is to support them both separately, but if you mix the two the gradient bleeds out of the rounded corner.

I am also seeing strangeness with shadows showing as a solid black line under a box with rounded corners.

Here are the images shown in IE9:

How can I work around this problem?

Answer 1

I have also been working with this problem. Another "solution" is to add a div around the item that has the gradient and rounded corners. Make that div the same height, width, and rounded corner values. Set the overflow to hidden. This is basically just a mask, but it works for me.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}