Curve bottom side of the div to the inside with CSS

Question

I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:

Does someone have an idea perhaps how it cou

Answer 1

Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.

.curved {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
}
.curved:after{
  background: white;
  position: absolute;
  content: "";
  left:0;
  right:0;
  bottom: -25px;
  height: 50px;
  border-radius: 50% 50% 0 0;
}