¿Cómo agregar un borde transparente?

Tengo una imagen de perfil de usuario simple y un indicador de estado verde.

Quiero agregar un borde transparente al indicador, que supera la imagen del fondo, como la imagen de abajo.

Esperando el resultado

Es fácil cuando el fondo es de un solo color, solo tengo que agregar un borde con el mismo color, pero ¿qué hacer cuando el fondo es un degradado o una imagen, por ejemplo? Si agrego un borde blanco, se ve como la imagen en el medio, y me gustaría tener un render como la imagen correcta.

¿Cómo lograr eso?

.user { display: inline-block; position: relative; } img { width: 75px; height: 75px; border-radius: 75px; } .user-state { position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 10px; background: #57d642; } 
  

Consideraría SVG y la máscara como a continuación:

 .user { display: inline-block; position: relative; } svg { width: 200px; height: 200px; } .user:after { content: ""; position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: #57d642; } body { background: linear-gradient(to right, pink, purple); } 
 

Borde:? Px Color de borde: rgba (255,255,255,0)