How can I create a concave bottom border in CSS?

Question

Content needs to be able to scroll behind it in the concave area and not be obscured. Specifically, I'm trying to create this:

Answer 1

For a transparent background, you can use box-shadows :

DEMO

Explanation :

The point of this technique is to use a pseudo element with box-shadows and a transparent backcground to see through it. The pseudo element is abolutely positioned and has a much larger width than the container in order to (with the help of border radius) give a smooth inset curve to the bottom of the div.

To make it simple : The background of the div is the box-shadow of the pseudo element.

The z-index values allow the content of the div to be dispayed over the shadow.

****** EDIT *************************

With content scolling behind the shape, you can see this DEMO

---

html,body{
    height:100%;
    margin:0;
    padding:0;
    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
div {
    background:none;
    height:50%;
    position:relative;
    overflow:hidden;
    z-index:1;
}
div:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:1300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px teal;
    z-index:-1;
}

<div>content</div>

Answer 2

I don't know of a way you could do this with a border, but you could try using ::before in CSS3 combined with border-radius as shown in this demo.

#header {
    position: fixed;
    z-index: 1;
    height: 80px;
    background: #f00;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
#header::before {
    content: "";
    position: absolute;
    background: #fff;
    bottom: -22px;
    height: 30px;    
    left: -50px;
    right: -50px;
    border-radius: 50%;
}
#content {
    padding: 20px;
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 0;
    width: 460px;
}

<div id="header">Header</div>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>