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.

&l         


        

Answer 1

Gradient will go out for rounded corners in IE9, so the best solution for now to add one extra 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/