CSS3 Border-Radius and 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.

BoltClock · Accepted Answer · 2012-01-08T18:37:53.913

3

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.

edited Jan 08 '12 at 18:37

answered Jan 08 '12 at 18:31

BoltClock

700,868
160
1,392
1,356

Got it, The DATA URI Backup works with the radius but IE6-8 do not work with the DATA URI. Maybe if I reorder them? – henryaaron Jan 08 '12 at 18:36
@user1090389: Reordering won't work. Filters will always be drawn over your SVG background image. – BoltClock Jan 08 '12 at 18:39
Would it be drawn over -ms-linear-gradient? – henryaaron Jan 08 '12 at 18:40
PPS I forgot to mention, this does not happen with inline elements, only block elements. – henryaaron Jan 08 '12 at 18:40
Don't know about inline vs block elements, but yes, it won't work in IE10 either. If you're not bothering about older versions of IE, you can safely stop using filters altogether. – BoltClock Jan 08 '12 at 18:41
I'll have to decide when IE10 comes out – henryaaron Jan 08 '12 at 18:43

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

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.

edited May 23 '17 at 12:21

Community

1
1

answered Jan 08 '12 at 18:27

Juha Laiho

596
2
8

1

jsFiddle triggers standards mode. – BoltClock Jan 08 '12 at 18:29

CSS3 Border-Radius and IE9

2 Answers2