Question

I came across a weird thing in IE9 trying to get a background gradient to display.

Basically I’m applying multiple classes to a container object.

<div class="gradient corners"></div>

Using this CSS.

.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

To get the gradient in IE, I apply the filter garbage to my .gradient class.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');

With that, the gradient works but my rounded corners go away.

So I tried putting in a conditional for the filter declaration.

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

That brings back my corners but the gradient goes away.

Answer 1

Gradient will go out for rounded corners in IE9, so the best solution for now to add one extra div:

 <div class="corners"><div class="gradient"></div></div>

and hide overflow for .corners

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

I recomend this Photoshop-like tool for creating cross-browser gradients: http://www.colorzilla.com/gradient-editor/

And this one to create border-radius:
http://border-radius.com/