Overlapping circles bleeding

Question

I have a position:relative green ring with a position:absolute red clone :before and a position:absolute white clone

Answer 1

The reason for the problem is antialiasng in the limiting (border) pixels. To make the border of the circle less pixelated, the pixels that are only half-way inside the circle are rendered semitransparents.

The problem is that the circle under the top one is also rendering semitransparent pixels. (in another color, of course). So, half transparent white is rendered on top of semitransparent red (that is rendered on top of semitransparent green).

The net result is that the pixel is not pure white.

To solve the root of the problem, you would need to turn off antialiasing, that AFAIK is not posible with borders (only text, and images under develoopment). Besides, such a solution would make the circle quite ugly

To mitigate it, you can do several hacks, with sizes, shadows, or whatever.

For another way to solve your original issue in CSS, (besides the excellent one that you already have using SVG) see this answer.