alt131 - 2:02 pm on Jun 7, 2011 (gmt 0)
Yup, my first thought was the background bleeding through and tried that - and when it failed a search revealed I wasn't alone. Then checked the candidate recommendation, and the background should be clipped to the curve, so on second thoughts, if a conforming browser has implemented border-radius it should also have implemented the clip, so an explicit setting should be redundant. Duh! ;)
Given the border is deep enough on full zoom to require some px to be transparent to create the impression of a curve, I also tested using a transparent border colour, and rgba. The first reproduced the effect using the background-color - which indicates background was being clipped (and hence the above failed as a "fix") , and rgba made no difference. Trying to "patch/blend" the undesired effect using a border-shadow didn't help. That took me for a wander though the svg recommendation, alpha compositing, shape rendering etc - interesting things, but not directly helpful here.
There are a lot of bug reports about this, and I think this may rendering artefacts, not style.
Colours are definitely relevant to how "bad" it looks. l008comm, my quick tests suggest you've found the very best colour combinations to illustrate this :)
Something like the following on full zoom, swap the colours around and note how the artefacts appear on the inside and straight edges of the border, as well as a few px out into the body.
margin: 0 auto;
A reminder a browser isn't a graphics prog, but very interesting ... any other approaches that might help?