Using mask instead of overflow gives a better result (both behave the same since both hide what is outside)
.cover {
margin: 1em;
padding: 1em;
}
.image-wrapper {
height: 15em;
width: 15em;
background-color: black;
border-radius: 15px;
-webkit-mask:linear-gradient(#fff 0 0);
}
img {
height: 100%;
width: auto;
}
body {
background:pink;
}
<div class="cover">
<div class="image-wrapper">
<img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" />
</div>
</div>
<div class="cover">
<div class="image-wrapper">
<img src="https://picsum.photos/id/17/200/300" />
</div>
</div>