Can I create a div with a Curved bottom?

There are different approaches that can be adopted to create this shape. Below is a detailed description of possibilities:

SVG Based Approaches:

SVG is the recommended way to create such shapes. It offers simplicity and scale-ability. Below are a couple of possible ways:

1- Using Path Element:

We can use SVG's path element to create this shape and fill it with some solid color, gradient or a pattern.

Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.

Below is the necessary code to create this shape:

<path d="M 0,0
         L 0,40
         Q 250,80 500,40
         L 500,0
         Z" />

Below is a brief description of path commands used in above code:

• M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
• L command is used to draw straight lines.
• Q command is used to draw curves.
• Z command is used to close the current path.

Output Image:

Working Demo:

svg {
  width: 100%;
}

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>

2- Clipping:

Clipping means removing or hiding some parts of an element.

In this approach, we define a clipping region by using SVG's clipPath element and apply this to a rectangular element. Any area that is outside the clipping region will be hidden.

Below is the necessary code:

<defs>
    <clipPath id="shape">
        <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />

Below is brief description of the elements used in above code:

• defs element is used to define element / objects for later use in SVG document.
• clipPath element is used to define a clipping region.
• rect element is used to create rectangles.
• clip-path attribute is used to link the clipping path created earlier.

Working Demo:

svg {
  width: 100%;
}

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>

CSS Based Approaches:

1- Using Pseudo Element:

We can use ::before or ::after pseudo element to create this shape. Steps to create this are given below:

• Create a layer with ::before OR ::after pseudo element having width and height more than its parent.
• Add border-radius to create the rounded shape.
• Add overflow: hidden on parent to hide the unnecessary part.

Required HTML:

All we need is a single div element possibly having some class like shape:

<div class="shape"></div>

Working Demo:

.shape {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.shape::before {
  border-radius: 100%;
  position: absolute;
  background: black;
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}

<div class="shape"></div>

2- Radial Gradient:

In this approach we will use CSS3's radial-gradient() function to draw this shape on the element as a background. However, this approach doesn't produce very sharp image and it might have some jagged corners.

Required HTML:

Only single div element with some class will be required i.e.

<div class="shape"></div>

Necessary CSS:

.shape {
  background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}

Working Demo:

.shape {
  background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
  height: 80px;
}

<div class="shape"></div>

JavaScript Based Approaches:

Although not required in this case but for the sake of completeness, I'm adding this approach as well. This can be useful in some cases as well:

HTML5 Canvas:

We can draw this shape on HTML5 Canvas element using path functions:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();

<canvas id="canvas" width="622" height="80"></canvas>

Below is a brief description of the methods used in above code:

• beginPath() is used to create a new path. Once a new path is created, future drawing commands are directed into the path.
• moveTo(x, y) moves the pen to the coordinates specified by x and y.
• lineTo(x, y) draws a straight line from the current pen position to the point specified by x and y.
• quadraticCurveTo(cp1x, cp1y, x, y) draws a curve from current pen position to the point specified by x and y using control point specified by cp1x and cp1y.
• fill() fills the current path using non-zero or even-odd winding rule.

Useful Resources:

• Radial Gradient: Specs, MDN
• SVG: Specs, MDN
• HTML5 Canvas: Specs, MDN

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 : DEMO

This is what you want:

div{
    background-color: black;
    width: 500px;
    height: 300px;
    border-radius: 0 0 50% 50% / 50px;
}

Unlike the accepted answer, this works even when the height of the div is increased.

Demo: jsFiddle

Yes, you can do this in CSS - basically make your div wider than the page to fix the too-rounded edges, then left-positioned to compensate, with bottom border radius using both x & y values, and negative bottom margin to compensate for the gap:

.round-bottom { 
  border-bottom-left-radius: 50% 200px; // across half & up 200px at left edge
  border-bottom-right-radius: 50% 200px; // across half & up 200px at right edge
  width: 160%; overflow: hidden; // make larger, hide side bits
  margin-bottom: -50px; // apply negative margin to compensate for bottom gap
  position: relative; left:-30%; // re-position whole element so extra is on each side (you may need to add display:block;)
}

.round-bottom { 
  border-bottom-left-radius: 50% 150px !important;
  border-bottom-right-radius: 50% 150px !important;
  position: relative;
  overflow: hidden;
  width: 160%; 
  margin-bottom:-50px;
  left:-30%; 
  background-color:#444;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a2/Tropical_Forest_with_Monkeys_A10893.jpg'); background-position: center center;
  background-size: 42% auto;
  height:150px;
}
.container { width: 100%; height: height:100px; padding-bottom:50px; overflow:hidden;}

<div class="container"><div class="round-bottom"></div></div>