border-radius + gradient + box-shadow causing ragged edge

Question

When I apply border-radius and a background gradient to a <li> the rounded corners look ragged and rough. Check it out on this jsfiddle

I'm seeing this in Chrome and FF. If I remove the gradient OR the border-radius the problem goes away.

Any ideas why this is happening and how I might fix it?

UPDATE: I'm working on a jQuery solution that builds on Josh F's idea (see his full answer below). It's a simple jQuery function that appends a duplicate copy of the element behind it. At the moment, the scripts sets the positioning of the targeted element to relative. (I could see this being problematic in some cases.) My code is on jsfiddle here.

Answer 1

The current spec defines box-shadow to be drawn outside of the border-box. However, the background/border paints elements to the background, with no regard for other elements (it doesn't paint with objects, only on top of). Since the element with the border-radius is drawn before the box-shadow, it draws the corner with a semi-transparent edge to cause the corner to look smooth (as it should). Regrettably, due to how the spec is worded for box-shadow, it is drawn after the element, and therefore painted on top of the page (after the element) with a semi-transparent edge. Normally, this would be fine, but since both the element and the box-shadow have a transparent edge on the same pixels, it causes the small, semi-transparent gap.

This is a known bug, or has at least been considered a bug by the web design community. See Bugzilla Bug #474386 (specifically comment #6) for source of my information.