IE9 Rounded Corners & CSS Background Gradients Living Together?
conditional-comments, css, html, internet-explorer-9
Solution
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/
Problem
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.