IE9 Issue Border Radius and Linear Gradient

IE9 border-radius and background gradient bleeding

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;
}

Why border-radius doesn't work in IE9?

IE9 does support border-radius.

However, there is a well known bug in IE9 when you use filter gradients in conjunction with border-radius. The gradient will be rendered as a box without rounded corners, and will be placed on top of any border radius you've defined. The rounded corners are there; you just can see them.

There is no way around this using filter for your gradients: if you use filter gradients, then your rounded corners will not work in IE9.

The solution is to render the gradients using a different technique. There are two options I can suggest:

• Use an SVG data-URL.

  This basically involves creating an SVG image for your gradient, converting it to a base-64 encoded data-URL, and then sticking it directly into your CSS code. It's ugly, but it does work. You'll want to make it specific to IE9 though, as otherwise it might interfere with your gradients in other browsers. And you'll still need to keep the filter if you want to support IE8, so that'll also need to be made browser-version specific so it isn't used by IE9. As I said, it's an ugly solution.

  If you do want to use this option, there is a generator you can use for it here: http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

• Use a polyfill script like CSS3Pie.

  CSS3Pie is a little Javascript library that adds support in all IE versions for a bunch of CSS features that aren't normally supported. This includes CSS gradients, and also border-radius for IE8 and earlier. It's easy to use, and allows you to use standard CSS code for all browsers, even older IEs. The only down-side is that it is a Javascript library, so if your user has JS disabled he won't see it. Fortunately that's pretty rare these days, so it's generally safe to use. This is my recommended solution.

Gradient is not rounded in IE9

Remove the filter style from your css class.

JS Fiddle Example

If you want the gradient for IE8 and below, then you need to create a separate CSS file and wrap it in this:

<!--[if lte IE 8]>
[css path here]
<![endif]-->

You cannot have both a gradient and a rounded corner button in IE9. In fact, Twitter's Bootstrap framework degrades IE9 buttons to a solid background color with a rounded corner.

IE9: border-radius + gradient + border doesn't mix, but looks fine everywhere else. What do?

I was able to remove the white border using a conditional comment. Not best solution but decent.

IE9 Rounded Corners & CSS Background Gradients Living Together?

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/

---

Related Topics