Jon Leighton Reporter
	Description • 13 years ago

User-Agent:       Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Build Identifier: Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

Please see the demo above. Part of the red background from the parent element clearly bleeds into the yellow background of the child element.

Reproducible: Always

	David Baron :dbaron:
	Comment 1 • 13 years ago

(with some extra jsfiddle material removed)

	Boris Zbarsky [:bzbarsky]
	Comment 2 • 13 years ago

This isn't a layout issue, really; it's a graphics issue.  The problem is that when clipping the border to the rounded corner we antialias it, and drawing two antialiased edges on top of each other doesn't completely hide the bottom edge, of course.

WebKit, unsurprisingly, has the same behavior (at least both Chrome and Safari on Mac do).  I'm not sure there's actually a way to do this "right"...

	d
	Comment 3 • 13 years ago

I recall that Microsoft made a big thing out of having the only browser to be able to render "perfect" border-radius curves. Would anyone with a compatible OS see if/how they've solved it?

	Boris Zbarsky [:bzbarsky]
	Comment 4 • 13 years ago

IE9 has exactly the same red fringe that I see in Gecko and WebKit on the attached testcase.

	Boris Zbarsky [:bzbarsky]
	Comment 5 • 13 years ago

I guess one way to try to deal with this would be to paint the backgrounds to the square area and then later clip the result to the rounded-corner area....

	Timothy Nikkel (:tnikkel)
	Comment 6 • 13 years ago

I think that would be slower.

	Boris Zbarsky [:bzbarsky]
	Comment 7 • 13 years ago

Well, sure.  That's why no one does it!