IE9 filter gradient and border-radius conflict

css, filter, internet-explorer-9

Solution

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

Problem

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.

Original source

Related problems