background-image is not properly rendering only in IE9

Question

I am using the filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#0000FF',GradientType=0 ); code to set the gradient background image in IE9.

Here is my fiddle .

The result in IE9 looks like,

But, i got trouble with the border-radius style. What's wrong in my code? Is there any solution for this?

I have found the similar question on IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient With answer of

Add the browser specific class or Set svg data as background image.

• I don't like to use different css file or adding different HTMLElement based on browser version.
• It might affect the performance of page when i use svg data as background-image.

Answer 1

You can add another element inside your .gradient_style which will have background-image and filter set. Then set overflow: hidden on parent element and you should be good.

Example CSS:

.gradient_style {
    background: transparent;
    height: 50px;
    width: 150px;
    border-radius: 25px;
    border: 1px solid #050DFA;
    overflow: hidden;
}

.gradient_style div {
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#00A3EF', GradientType=0);
    width: 100%;
    height: 100%;
}

And HTML:

<div class="gradient_style"><div></div></div>

Working sample: http://jsfiddle.net/DymK5/2/

Answer 2

This is a known bug in IE9, where a background gradient using the filter style ignores the border-radius and always renders the gradient into the corners of the element.

It is unfortunate that IE9 didn't implement standard CSS gradient syntax, which makes this kind of thing necessary.

There are work-around options, but they're all a bit ugly.

The most well-known work-around option is to use an SVG data-URL for the gradient, for IE9 only. The issues with this are that you still need the filter for IE8 support, and of course IE10/11 does use standard CSS gradients, so you need to start using conditional stylesheets to set the styles depending on the brower version. It gets ugly very quickly.

I wouldn't worry too much about performance of this; it should be fine. The problems are more with managing the code than with perf. (and in any case, even if there is a perf issue, it will only affect the specific browser version involved, IE9, so it will be a relatively small portion of your audience)

Another option is to use the CSS3Pie polyfill script. This is a good option because it allows you to use standard CSS code for your gradients in all IE versions. Since you say you dislike using different CSS for different browser versions, this is a big plus point.

The downside is that it is Javascript-based, so could have performance implications. But that said, I've never seen it have any perf problems with it, as long as you're not over-doing it (ie using it for hundreds of elements on the same page).

If all else fails, I guess there's always the option of simply just not supporting gradients for old IE versions, and having a plain solid-colour background fallback.