Curve bottom side of the div to the inside with CSS

Simply use

border-radius

.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 ></div>

You can also use

radial-gradient

body {  background: pink;}.container {  margin: 0 auto;  width: 500px;  height: 200px;  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);}<div ></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 ></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 ></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 ></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 ></div>