IE9 Rounded Corners & CSS Background Gradients Living Together?

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/

Answer 2

you don't need the if IE block.

just put all 3(4 if you include both IEs) rules in the style declaration, the browsers will only pick up the ones that they understand.

an example:

.gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

It should also be noted that gradients in IE will only work if the element hasLayout (See: http://reference.sitepoint.com/css/haslayout)

Answer 3

This is a pretty solid workaround for the IE9 gradients vs corners issue. It uses js to generate an SVG on the fly - and it's fast.

http://abouthalf.com/2011/10/04/updated-ie9-gradients-with-rounded-corners/

Answer 4

rounded corners and filter don't go together. for IE i always include http://css3pie.com and use it to do border-radius and gradients in IE. a sample css looks like this:

.someElement {
    behavior: url(assets/js/PIE.htc);
    border-radius: 10px;
    background: #8cb2d1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #8cb2d1 0%, #4080b3 42%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3));
    background: -webkit-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -o-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -ms-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);
}

The steps:

1. include PIE.htc via behavior
2. add border radius as usual (border-radius: 10px;)
3. add the special -pie-background attribute: (-pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);)

Answer 5

Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. SVG or JS are unnecessary.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}