Gradient in Internet Explorer 9 overflows rounded border

Question

I have a problem with rounded borders and gradient in IE9. A gradient overflows a rounded border.

.cn_item:hover, .selected{ width:300px; border:1px solid #333333; cursor:pointer; position:relative; overflow:hidden; height:49px; color:#333333; padding:5px; margin:6px 5px 0px 0px; text-shadow:1px 1px 1px #000; background-image: -ms-linear-gradient(top, #DDDDDD 25%, #FF0000 5%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666')"; zoom: 1; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } 

I already use overflow:hidden; but nothing works. Any suggestions?

Answer 1

This is a known bug. If you are looking for stackoverflow, there are some questions like this.
IE9 gradient gradient radius and background gradient

The only way around this without adding extra markup is to use svg.
The Colorzilla Gradient Editor should make this easy.

Answer 2

Just use the div wrapper (rounded and overflowed) to copy the radius for IE9. Simple, cross-browser works. No need for SVG, PIE, JS or conditional comments.

 <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 */ }