eu tenho umposition:relative anel verde com umposition:absolute clone vermelho:before e umposition:absolute clone branco:after cobrindo os dois (já que estão no mesmo local e têm o mesmo tamanho).

O problema é: fica ruim nos dois navegadores testados (Chrome e Firefox), onde ainda vejo os anéis verde / vermelho sob a máscara branca. Deixe o verde tocar comoverflow:hidden corrige parcialmente o problema de remoção do sangramento externo; mas a borda interna do sangramento permanece lá.

Por que isso acontece e como posso esconder totalmente os 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>

Atualizar: Aqui está um link do cenário completo (não mínimo):Codepen que está trabalhando apenas no Google Chrome atualizado no momento;