Gradient is not rounded in IE9

Question

I've created a rounded corner button and in IE9 the gradient background is not rounded:

Here is the CSS:

.search button {
    padding: 10px;
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif;
    font-size: 16px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

How can I fix this?

Answer 1

Remove the filter style from your css class.

JS Fiddle Example

If you want the gradient for IE8 and below, then you need to create a separate CSS file and wrap it in this:

<!--[if lte IE 8]>
[css path here]
<![endif]-->

You cannot have both a gradient and a rounded corner button in IE9. In fact, Twitter's Bootstrap framework degrades IE9 buttons to a solid background color with a rounded corner.

Answer 2

IE9 is a perfectly good browser; the problem is using the old filter styles.

They never were any good, and they were only really left in IE9 for legacy support reasons. There are loads of quirks with them, including this one which is quite well known.

Your problem is that IE9 doesn't support standard CSS gradients, so the question is what to do instead of filter if you want to use them?

There are various answers, but the best one is CSS3Pie.

This is a little javascript library that allows you to use standard CSS gradients in IE9 (and all other IE versions from IE6 onward). It also adds border-radius and box-shadow for the versions of IE that don't support them anyway.

It's unobtrusive, and doesn't cause any extra overhead in other browsers.

CSS3Pie uses IE's vector graphics language, VML to render its gradients, hence why it isn't affected by the filter bug.

If you really wanted to avoid using Javascript, it would be possible to create a VML or SVG element for yourself with a gradient. This could be done within your CSS using a URI-encoded image (example here). But much easier to let CSS3Pie do it for you.

The only other solutions you have available are either loading an old-school background graphic, or just providing a solid background colour as a fallback option.

You should probably provide the fallback plain colour anyway, but for this issue, my money is on CSS3pie being the best solution.

Hope that helps.