Curl bottom of div to inside using CSS

Question

I want to bend the bottom edge of this rectangular div/background using CSS, so the result is this: Does anyone know how to achieve it? .curved{margin:0auto;height:400px;background:lightblue;border-radius:00200px200px;}&l

P粉936568533 · Answer

check. I created this using :after pseudo-element. It helps if the background is a 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;
}

P粉564301782 · Answer

Just use border-radius and rely on some overflow. You can also consider pseudo-elements to avoid extra markup:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  height: 80px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -25px;
  background: #fff;
}