border-radius + gradient + box-shadow causing ragged edge
css
Solution
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.
Problem
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.