How to Curve the Div from Bottom with Image Background

Make a curve in a div with background image

Here is a solution that uses background-size: cover, so it is easier to adapt. (It would be easier with known dimension images).

The drawback is a little complex markup, 3 auxiliar divs are needed.

The curves are standard border-radius, so that can be adjusted as needed

.container {  width: 600px;  height: 400px;  border: solid 1px blue;  position: relative;}.up {  width: 100%;  height: 50%;  position: relative;  border-bottom: 40px solid transparent;  background-image: url(http://lorempixel.com/600/400);  background-size: cover;  background-position: center bottom;  background-origin: border-box;  background-clip: padding-box;  margin-bottom: -40px;}.addon {  width: 25%;  height: calc(100% + 40px);  position: absolute;  left: 37.5%;  border-radius: 0px 0px 50px 50px;  overflow: hidden;  background-image: inherit;  z-index: 2;}.addon:before {  content: "";  position: absolute;  width: 400%;  height: 100%;  left: -150%;  background-image: inherit;  background-size: cover;  background-position: center bottom;  background-origin: padding-box;  background-clip: padding-box;}.down {  width: 100%;  height: 50%;  position: relative;  bottom: 40px;  border-top: 40px solid transparent;  background-image: url(http://lorempixel.com/400/200);  background-size: cover;  background-position: center top;  background-origin: border-box;  background-clip: padding-box;  margin-top: -40px;}.addleft {  width: 37.5%;  height: calc(100% + 40px);  position: absolute;  left: 0px;  bottom: 0px;  border-radius: 0px 50px 0px 0px;  overflow: hidden;  background-color: tomato;  background-image: inherit;  background-size: 0px 0px;}.addleft:before {  content: "";  position: absolute;  width: 266.667%;  height: 100%;  left: 0px;  background-image: inherit;  background-size: cover;  background-position: center top;  background-origin: padding-box;  background-clip: padding-box;}.addright {  width: 37.5%;  height: calc(100% + 40px);  position: absolute;  right: 0px;  bottom: 0px;  border-radius: 50px 0px 0px 0px;  overflow: hidden;  background-image: inherit;  background-size: 0px 0px;}.addright:before {  content: "";  position: absolute;  width: 266.667%;  height: 100%;  right: 0px;  background-image: inherit;  background-size: cover;  background-position: center top;  background-origin: padding-box;  background-clip: padding-box;}

<div class="container">  <div class="up">    <div class="addon"></div>  </div>  <div class="down">    <div class="addleft"></div>    <div class="addright"></div>  </div></div>

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>

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

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>