tengo unposition:relative anillo verde con unposition:absolute clon rojo:before y unposition:absolute clon blanco:after cubre ambos (ya que están en el mismo lugar y tienen el mismo tamaño).

El problema es: se muestra mal en ambos navegadores probados (Chrome y Firefox) donde todavía puedo ver los anillos verdes / rojos debajo de la máscara blanca. Deja que el verde suene conoverflow:hidden soluciona parcialmente el problema eliminando el sangrado externo; pero el borde sangrante interno aún permanece allí.

¿Por qué sucede y cómo puedo ocultar totalmente los círculos inferiores?

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>

Actualizar: Aquí hay un enlace del escenario completo (no mínimo):Codepen que solo funciona en Google Chrome actualizado en este momento;