IE 9 Gradients with rounded corners

You might have noticed that if you set a background gradient on something and give it rounded corners, IE9 totally ignores your rounded corners and draws an ugly square cornered gradient. Try looking at this example in IE9.

To fix the problem simply place your gradiented content within an outer element with the same rounded corners and it's overflow set to hidden to mask off the corners.

HTML:

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

CSS:

    .mask
    {
        overflow: hidden;
    }
        
    .roundedCorners
    {
        border-radius: 5px;
    }

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

This example should appear with rounded corners even on IE9. If your using any older version of IE I'm afraid your out of luck, it's square corners all the way.

(You can use this gradient editor to generate cross browser gradient CSS.)