Gradient in Internet Explorer 9 overflows the rounded border

Question

I'm having a problem with rounded borders and a gradient in IE9. The gradient overflows the 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 the overflow:hidden; but nothing works. Any suggestions?

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

This is a known bug. If you search stackoverflow there are some questions just like this one.
IE9 border-radius and background gradient bleeding

The only way around it without adding more markup is to use svg.
Colorzilla gradient editor should make it easy.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 09 '12 at 00:47

elclanrs

92,861
21
134
171

score 1 · Answer 2 · answered Feb 12 '13 at 19:01

Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. 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 */ 
}

Gradient in Internet Explorer 9 overflows the rounded border

2 Answers2