Curve Bottom Side of the Div to the Inside With Css

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>

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>

How to shape a div corner in css

You can hack using multiple elements like this:

.d1 {  width: 100px;  height: 100px;  background-color: #00f;}
.wrapper {  width: 100px;  height: 20px;  background-color: #fff;  margin-top: -20px;}
.d2 {  width: 100%;  height: 100%;  border-radius: 50%;  background-color: #00f;}
.wrapper2 {  width: 100px;  height: 10px;  background-color: #00f;  margin-top: -20px;  position: absolute;}

<div class="d1"></div><div class="wrapper">  <div class="d2"></div></div><div class="wrapper2"></div>

CSS Make a div curved at top and bottom but straight at the left and right sides

Something like this can be achieved but it's troublesome. SVG will be better for this.

Referenced from this question on SO.

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainbox {
  width: 200px;
  height: 130px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#mainbox::before,
#mainbox::after {
  content: "";
  display: block;
  position: absolute;
  height: 100px;
  /* equal to inner curvedbox */
  border-left: 5px solid black;
  bottom: 0;
  z-index: 1;
}

#mainbox::before {
  left: 0;
}

#mainbox::after {
  right: 0;
}

#curvedbox {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#curvedbox::before,
#curvedbox::after {
  display: block;
  content: "";
  width: 140%;
  height: 200%;
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#curvedbox::before {
  top: -30%;
}

#curvedbox::after {
  top: 69%;
}

#secondbox {
  transform: translateY(-140%);
}

<div id="mainbox">
  <div id="curvedbox">
    <div id="secondbox">test</div>
  </div>
</div>

How to bend the border like slight crecent shape using css?

I'd use border-radius instead of skew. Tweak the values of border-bottom-left-radius and border-bottom-right-radius to tweak the apex of the crescent.

div {  position: relative;  text-align: center;  padding: 12px;  margin-bottom: 6px;  border:1px solid red;  border-top: 0px;  float: left;  margin: 5px;}
#chevron-1 {  position: relative;  text-align: center;  padding: 12px;  margin-bottom: 6px;  height: 60px;  width: 200px;  border:1px solid red;  border-top: 0px;}
#chevron-2 {  position: relative;  text-align: center;  padding: 12px;  margin-bottom: 6px;  height: 100px;  width: 100px;  border:1px solid red;  border-top: 0px;}

div::before {  content: '';  position: absolute;  top: 0;  left: 0;  height: 20%;  width: 50%;  border-bottom-left-radius: 100%;  border-bottom: 1px solid red;}
div::after {  content: '';  position: absolute;  top: 0;  right: 0;  height: 20%;  width: 50%;  border-bottom-right-radius: 100%;  border-bottom: 1px solid red;}

<div id="chevron-1"></div>
<div id="chevron-2"></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