Como adicionar uma borda transparente?
Tenho uma imagem de perfil de usuário simples e um indicador de estado verd
Quero adicionar uma borda transparente ao indicador, que ultrapasse a imagem em segundo plano, como na imagem abaix
É fácil quando o fundo é de uma única cor, basta adicionar uma borda com a mesma cor, mas o que fazer quando o fundo é um gradiente ou uma imagem, por exemplo? Se eu adicionar uma borda branca, ela se parecerá com a imagem no meio e eu gostaria de ter uma renderização como a imagem certa.
Como conseguir isso?
.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;
}<body>
<div class="user">
<img src="http://lorempicsum.com/up/255/200/5" alt="">
<div class="user-state"></div>
</div>
</body>