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?
I forgot to mention, this does not happen with inline elements, only block elements.
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
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.