Question

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-background-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
    );
}

Answer 1

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);