Unwanted border-radius corners around images in Brave/Chrome browser

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>

Leave a Comment

error code: 523