html - How to curve the div from bottom with image background

Question

Is it possible to add the bottom curved using HTML CSS so we don't ned to crop the image like this? The main purpose of this is to allow image curved automatically like that, I tried to add border-radius but it won't work. Any help?

I think we need to use the SVG? I am not sure.

Answer 1

Depending on your browser support requirements you could use clip-path and circle.

.clip {
  display: inline-block;
  clip-path: circle(100% at 50% -50%);
}

<div class="clip">
  <img src="https://placehold.it/500x350" alt="">
</div>