Rounded Corners CSSPIE + CSS Gradient

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

score 2 · Accepted Answer · answered Aug 02 '11 at 21:44

2

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

answered Aug 02 '11 at 21:44

lojjic

791
5
7

Awesome, Thanks works for IE7,8, but you can't use PIE on IE9 right, so I can't do this for IE9? Looks like theres a SVG background image solution for IE9, but UGH, this is so lame!! – williamsandonz Aug 03 '11 at 05:26
IE9 gradient support is in progress, see this thread for a testing build: http://css3pie.com/forum/viewtopic.php?f=4&t=933 – lojjic Aug 03 '11 at 22:08
In case anyone comes across this comment, IE9 is now fully supported in PIE as of version 1.0beta5. – lojjic Oct 30 '11 at 18:01

score 0 · Answer 2 · answered Sep 14 '11 at 10:33

0

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

answered Sep 14 '11 at 10:33

Benjamin Intal

2,748
1
25
26

Rounded Corners CSSPIE + CSS Gradient

2 Answers2