Gradient is not rounded in IE9

Question

I 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 the css class.

JS script example

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

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

IE9 cannot have either a gradient or a rounded corner button. In fact, the Twitter Bootstrap platform degrades IE9 buttons to a solid background color with a rounded corner.

Answer 2

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

They were never good, and they were really only left in IE9 for reasons of outdated support. There are many quirks with them, including one that is pretty well known.

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

There are different answers, but the best is CSS3Pie .

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

This is unobtrusive and does not cause unnecessary overhead in other browsers.

CSS3Pie uses the vector graphics vector IE, VML to render its gradients, so it is not affected by the filter error.

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

The only solutions available are either loading the old-school background image, or simply providing a solid background color as a fallback option.

In any case, you should probably provide a backup plain color, but for this problem my CSS3pie money is the best solution.

Hope this helps.