CODEWITHSUNDEEP
internet-explorer-9gradientcss
henryaaron
henryaaron

Reputation: 6192

CSS3 Border-Radius and IE9

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.

Upvotes: 1

Views: 653

Answers (2)

BoltClock
BoltClock

Reputation: 723448

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.

Upvotes: 3

Juha Laiho
Juha Laiho

Reputation: 596

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.

Upvotes: 0

Related Questions