CSS3 Border-Radius和IE9

Question

I have CSS3 gradient that I've generated with ColorZilla. I'm pretty sure what's causing the problem is the DATA URI. Here's my fiddle: http://jsfiddle.net/cY7Lp/ .

In WebKit & Firefox, the corners are rounded as they should be, but in IE9, the corners are rounded and the gradient bleeds outside them, I don't want the gradient to bleed outside the corners. Does anybody know why it happens?

---Edit---

I forgot to mention, this does not happen with inline elements, only block elements.

Answer 1

It has nothing to do with your SVG image or its data URI, but it has to do with your filter . Effects generated by the filter property, which you're using, do not get clipped by border-radius , and often overlap certain other things such as background images.

Whether this is a real bug or an unintended side effect, I don't know, but that's the cause in IE9, as it doesn't implement CSS3 gradients — only IE10 does.

Since you're using an SVG image anyway, you can easily fall back to that instead of using filter .

Answer 2

Border radius issue seems to be discussed here:

Support for "border-radius" in IE

... so, likely it is that your browser is rendering in legacy mode.