CODEWITHSUNDEEP
cssborder-radius
Pioz
Pioz

Reputation: 6321

Strange behavior with CSS border-radius issue

I've the follow html with CSS

.image_with_loader_container {
  position: relative;
  width: 100%;
  padding-bottom: 139.34426%;
  background: #dbdbdb;
}

.image_with_loader_container img {
  border-radius: 4.75%/3.5%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="image_with_loader_container">
  <img src="..." />
</div>

In this video (Chrome 83) you can see that the border-radius doesn't work very well. You can check this behavior live at https://mtgprint.cardtrader.com .

Any idea to solve this issue?

Upvotes: 0

Views: 1126

Answers (1)

Chris Warrick
Chris Warrick

Reputation: 1629

You are adding rounded corners to the image, but the container with background: #dbdbdb; is still a rectangle. (You can see it better if you set your radius to a large value, like 100%). Try either removing that background, or adding the same border-radius to .image_with_loader_container.

Upvotes: 1

Related Questions