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 could be achieved?

.curved {

  margin: 0 auto;

  width: 800px;

  height: 500px;

  background: lightblue;

}


<div class="container">

  <div class="curved"></div>

</div>

Answer 1

Simply use border-radius and rely on some overflow. You can also consider
pseudo element 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;

}


<div class="container">

</div>

You can also use radial-gradient if you want a transparent shape:

body {

  background: pink;

}



.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);

}


<div class="container">

</div>

And here is another way using clip-path

.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

  background-color: lightblue;

  position: relative;

  overflow: hidden;

}



.container:after {

  content: "";

  position: absolute;

  bottom: 0;

  right: -5%;

  left: -5%;

  height: 120px;

  background: #fff;

  -webkit-clip-path: ellipse(50% 60% at 50% 100%);

  clip-path: ellipse(50% 60% at 50% 100%);

}


<div class="container">

</div>

You can also consider SVG:

.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;

}


<div class="container">

</div>

Here is an example if you want also to add border around your shape:

.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

  border: 2px solid #000;

  border-bottom: 0;

  background: lightblue;

  position: relative;

  overflow: hidden;

}



.container:after {

  content: "";

  position: absolute;

  height: 80px;

  left: -10%;

  right: -10%;

  border-radius: 50%;

  bottom: -62px;

  background: #fff;

  z-index: 2;

}



.container:before {

  content: "";

  position: absolute;

  height: 82px;

  left: -10%;

  right: -10%;

  border-radius: 50%;

  bottom: -62px;

  background: #000;

  z-index: 1;

}


<div class="container">

</div>

If you want to have an image or gradient as background with the transparency,
use mask-image:

body {

  background: pink;

}



.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

  -webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);

          mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);

  background: linear-gradient(45deg,red,yellow,blue);

}


<div class="container">

</div>