IE9 Filter Gradient and Boundary Radius Conflict

Question

I am trying to use the gradient effect and the radius of the border for the same element, but there is a conflict between them. The gradient works fine, but it does not work the border radius.

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 do not want to use .htc files.

Is this problem known between filter and border radius?

Thanks.

Answer 1

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

To generate an SVG gradient, use: http://www.colorzilla.com/gradient-editor/ . You are not saying that you are trying to make it work in other browsers / versions of IE, but if you are trying to do it (perhaps because you are using filter ), use the method described in the "IE9 Support" section.

Another site for generating 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 */