Rounded Corners CSSPIE + CSS Gradient

We have an issue whereby we are using this code below. Its just a basic box with rounded corners and a gradient (and we apply CSSPie to it). We've noticed in all IE's we can't keep the rounded corners on this element in IE because of the gradient (pie doesnt work). Has anyone come across a solution for this? We'd love to migrate our gradients entirely from photoshop to CSS, but this is proving an annoying problem!

Thanks!!

    .superduper {
    position: relative;
    width: 100px;
    height: 100px;
-webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #ff0000 url("gradient-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-backgr开发者_Go百科ound-size: 100% 100%;
    background-size: 100% 100%;
    *background: #ff0000;
    background: #ff0000\0/;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF00ff00, endColorstr=#FFff0000);

    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#00ff00),
        to(#ff0000)
    );
    background-image: -webkit-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -moz-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -o-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
}

This is because you are using the IE proprietary 'filter' property. Because of the way IE renders filters, it paints the entire element box, which covers up the corner rounding.

You should remove the filter property, and specify your linear-gradient in the -pie-background property. This will allow PIE to render the gradient and honor the border-radius.

For an example of this in action, see the css3pie.com homepage (check the 'Show CSS' checkbox to see the generated code.)

E.g. -pie-background: linear-gradient(top, #00ff00, #ff0000);

This alternative is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js

Just include the script last in your head tag and it should handle the rest. See readme notes