The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.
This would work:
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
img {
display: inline;
margin: 0 auto;
height: 100%;
width: auto;
}<div class="image-cropper">
<img src="https://via.placeholder.com/150" class="rounded" />
</div>