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

user_2619658 0
Viewed 584

I tried to display a simple image, inside of a container with border-radius: 5px;. But there seem to be an outline of thin border at the corners (you'll need to look carefully at the below image). How can I avoid these corner borders ?

enter image description here

.cover {
    margin: 1em;
    padding: 1em;
}
.image-wrapper {
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
}
img {
    height: 100%;
    width: auto;
}
<div class="cover">
    <div class="image-wrapper">
        <img
            src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg"
        />
    </div>
</div>

Yes, it goes away if I remove background-color: black;. But I need to retain the background-color and I also need img { height: 100%; width: auto; } to maintain the aspect ratio and to care of scenarios when the size of the image is too thin or too wide, etc.

Searching for other similar questions, I could only find questions/responses for Safari. I'm using Brave browser.

css html
5 Answers

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>

user_86203330

Pretty sure this is a webkit bug since turning borer-radius off and back on from devtool fixed it. A possible work-around would be to not use wrapper and add object-fit:cover to the image to make it responsive. You can also try object-fit:contain but that will produce black banding. You can send a Chrome bug report from Help>Report an Issue if you feel like it.

Edit: Never mind. Apparently it fixes itself if you scroll up and down the page a few times and I thought it worked.

.cover {
    margin: 1em;
    padding: 1em;
}

img {
    border-radius: 15px;
    height: 100%;
    width: auto;
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
    object-fit:cover;
}
<div class="cover">
    <div class="image-wrapper">
        <img
            src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg"
        />
    </div>
</div>

user_5590790

This hack seems to work.

background-clip: content-box;
padding: 1px;

background-clip: content-box; has better browser support than -webkit-mask

.cover {
    margin: 1em;
    padding: 1em;
}
.image-wrapper {
    height: 15em;
    width: 15em;
    overflow: hidden;
    background-color: black;
    border-radius: 15px;
    background-clip: content-box;
    padding: 1px;
}
img {
    height: 100%;
    width: auto;
}
<div class="cover">
    <div class="image-wrapper">
        <img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" alt="hello" />
    </div>
</div>

user_26196580

It could be because of the background-color: black;. Try to remove it, and if it's not working add a border: none;

user_152293410

I guess its might be your image, went through the same format on my laptop, my image was never providing the rounded border corner, though add border: none; to your code and see the result

user_141333530
Related