How to Create a Div With a Curved Bottom

Can I create a div with a Curved bottom?

CSS:

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

see is this ok for you

div {
  background-color: black;
  width: 500px;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div>
</div>

Curved bottom on div

You can combine two values each for the border-radius in the different corners as shown in my snippet below:

.x {width: 240px;height: 120px;background: #fa0;border-bottom-left-radius: 120px 40px;border-bottom-right-radius: 120px 40px;
}

<div class="x"></div>

Slightly curved bottom div in css

You could do that using CSS clip-path!

For example, create a "spacer" div below the actual div with a clip-path property like that clip-path: ellipse(50% 9% at 50% 50%);. This will create an elliptic path from the div. Overlapp the top-half of this div with your original one and - tada - you have a rounded bottom.

Try this tool to experiment a little bit with clip-path or see the MDN Page

Curve bottom side of the div to the inside with CSS

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>

How to create a curve as shown below for the div

You can make the element to overflow by adding negative values to left/right. then add some padding to avoid content overflow like this :

.container {  width: 200px;  border: 1px solid blue;  height: 200px;  margin: 0 auto;  overflow: hidden;  position: relative;}
.count-select {  box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .8);  border-top: 2px solid #E75532;  height: 50px;  background: #fff;  position: absolute;  bottom: 0;  left: -30px;  right: -30px;  padding: 12px 30px;  border-radius: 50%;  text-align:center;}

<div class="container">  <div class="count-select ">    select items  </div></div>

How can I create div with an opposite-curved bottom

Try this:

div {  height: 250px;  width: 300px;  background: tomato;  position: relative;  margin:0 auto;}div:after {  content: "";  height: 50%;  width: 100%;  position: absolute;  background: white;  border-radius: 50%;  bottom: -25%;  transition: all 0.8s;}

<div></div>

How to add a bottom curve in a div - CSS?

You can use :after pseudo element to create shape and add large box-shadow for blue background.

div {  width: 300px;  height: 150px;  position: relative;  overflow: hidden;  text-align: center;  color: white;}div:after {  content: '';  box-sizing: border-box;  position: absolute;  bottom: 0;  left: 50%;  height: 100px;  width: 120%;  border: 5px solid black;  transform: translate(-50%, 50%);  box-shadow: 0px 0px 0px 200px #00A2E8;  border-radius: 50%;  z-index: -1;}

<div>Lorem ipsum</div>