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

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;}

Note that in this example the animation is made with SMIL. But you can also do it with JS as descirbed in the radial progress bar answer.

---

Previous answer:
If your aim is to remove the bleed, one solution would be to hide it by making the pseudo elements border wider.
Depending on your actual use case this solution can be apropriate.

Here is an example :

body{background:lavender}
#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}
#ring:before {
  content: '';
  position: absolute;
  top: -51px;
  left: -51px;
  width: 98px;
  height: 98px;
  border: 52px solid red;
  border-radius: 50%;
}
#ring:after {
  content: '';
  position: absolute;
  top: -52px;
  left: -52px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 54px solid white;
}