Search code examples
htmlcssborder-radius

fit an image inside div with border-radius?

Imagine a parent div with a rounded border-radius. Is there a way to fit an img inside the div so that it also conforms to the rounded border?

.parent-div {
  background-color: gray;
  border-radius: 20px;
}

.image {
  width: 100%
}
<div class="parent-div">
  <img class="image" src="/a-cool-image">
  <p>Some text</p>
</div>

This just results in an image with square corners while the div has rounded corners on the bottom. The only workaround I know is to have the image have the same border-radius property but only on the top two corners. I find that to be an annoying workaround.

Solution

  • Trying looking into a using overflow https://www.w3schools.com/cssref/pr_pos_overflow.asp

    .parent-div {
  background-color: gray;
  border-radius: 20px;

  overflow: hidden;
}

    Here is a working example to showcase what I'm suggesting: https://jsfiddle.net/4mbzpfu2/3/