css - Overlapping circles bleeding

Question

I have a position:relative green ring with a position:absolute red clone :before and a position:absolute white clone :after it covering both (since they are on the same place and have the same size).

The problem is: it renders bad on both browsers tested (Chrome and Firefox) where I still can see the green/red rings under the white mask. Let the green ring with overflow:hidden partially fixes the problem removing the outer bleed; but the inner bleeding border stills there.

Why does it happens and how can I totaly hide the lower circles ?

Codepen

body {
  background: lavender;
}

#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}

#ring:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 50px solid red;
  border-radius: 50%;
}

#ring:after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid white;
}

<div id=ring></div>

Answer 1

In your radial progress bar scenario, you can use the approach described here : Circular percent progress bar. Using inline svg and animating the stroke-dasharray attribute for the progress bar.
Adapted to your use case, it can look like this:

body{background:lavender;}
svg{width:200px;height:200px;}

<svg viewbox="-2.5 -2.5 105 105">
  <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="25" stroke="#fff"/>
  <path fill="none" stroke-width="25" stroke="tomato"  stroke-dasharray="251.2,0" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
</svg>