internet explorer 9 - IE9 border-radius and background gradient bleeding

ID : 20172

viewed : 35

Tags : internet-explorer-9gradientcompass-sasscssinternet-explorer-9

Top 5 Answer for internet explorer 9 - IE9 border-radius and background gradient bleeding

vote vote

99

I have also been working with this problem. Another "solution" is to add a div around the item that has the gradient and rounded corners. Make that div the same height, width, and rounded corner values. Set the overflow to hidden. This is basically just a mask, but it works for me.

HTML:

<div class="mask roundedCorners">     <div class="roundedCorners gradient">         Content     </div> </div> 

CSS:

.mask {     overflow: hidden; }  .roundedCorners {     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px; }  .gradient {     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */ } 
vote vote

81

Here's one solution that adds a background gradient, using a data URI to create a semi-transparent image that overlays any background color. I've verified that it's clipped correctly to the border radius in IE9. This is lighter weight than SVG-based proposals but as a downside, is not resolution-independent. Another advantage: works with your current HTML/CSS and does not require wrapping with additional elements.

I grabbed a random 20x20 gradient PNG via a web search, and converted it into a data URI using an online tool. The resulting data URI is smaller than the CSS code for all that SVG mess, much less the SVG itself! (You could apply this conditionally to IE9 only using conditional styles, browser-specific css classes, etc.) Of course, generating a PNG works great for button-sized gradients, but not page-sized gradients!

HTML:

<span class="button">This is a button</span> 

CSS:

span.button {    padding: 5px 10px;   border-radius: 10px;   background-color: orange;     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);   background-size: 100% 100%;    border: 2px solid white;   color: white; } 
vote vote

71

I think it's worth mentioning that in many cases you can use an inset box-shadow to "fake" the gradient effect and avoid the ugly edges in IE9. This works especially well with buttons.

See this example: http://jsfiddle.net/jancbeck/CJPPW/31/

Comparison of a button style with either linear gradient or box-shadow

vote vote

61

You can also use CSS3 PIE to resolve this issue:

http://css3pie.com/

Of course, that might be overkill if you're just depending on a single element with rounded corners and a background gradient, but it is an option to consider if you're incorporating a number of common CSS3 features on your pages and want easy support for IE6+

vote vote

58

I ran into this bug too. My suggestion would be to use a repeated background image for the gradient in ie9. IE9 correctly tiles the image behind the rounded borders (as of RC1).

I fail to see how writing 100 lines of code to replace 1 line of CSS is simple or elegant. SVG is cool and all, but why go through all that when easier solutions for gradient backgrounds have been around for years.

Top 3 video Explaining internet explorer 9 - IE9 border-radius and background gradient bleeding

Related QUESTION?