IE9 filter gradient and border-radius conflict

Question

I'm trying to use gradient effect and border radius on same element, but there is a conflict between them. Gradient works fine, but it makes border radius not working.

here is the script

.selector {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4317',endColorstr='#891a00');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

I don't want to use any .htc files.

Is this known issue between filter and border radius?

Thanks.

Answer 1

You can use an SVG gradient, here's an example that works in IE9 with a border-radius: http://jsfiddle.net/thirtydot/Egn9A/

To generate the SVG gradient, use: http://www.colorzilla.com/gradient-editor/. You don't mention trying to make it work in other browsers/versions of IE, but if that's what you're trying to do (you might be because you're using filter), use the method described in the "IE9 Support" section.

Another site to generate SVG gradients: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Answer 2

Use these classes for border radius and gradient

HTML Code:

<div class="box-radius ">border radius with gradient</div>

CSS Code:

.box-radius {
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
             -o-border-radius: 5px;
                border-radius: 5px;  
        /* behavior: url(border-radius.htc); */
    }

.gradient {
    background-image: -moz-linear-gradient(top, #ff4317, #891a00); /* Firefox 3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ff4317),color-stop(1, #891a00)); /* Safari & Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00')"; /* IE8 */