Unwanted Border-Radius Corners Around Images in Brave/Chrome Browser

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>

Browser adding unwanted space around images at mobile screen sizes

I managed to find the solution in another SO post.

Image inside div has extra space below the image

It is apparently happening because images are display:inline and it's adding the extra space to allow for text with letters that extend above or below the line.

The solution that worked for my example was to change the display value of the image elements to block (the d-block class in Bootstrap).

What backup strategy do you use for your code?

My strategy is always check in, and backup the entire repository.

I never leave anything out of source control and I make sure regular backups (incremental daily, full weekly and monthly rotation) are happening and are functional.

---

Related Topics