How to make a curve on a rectangle's top in css? only in top edge

Question

I want to create the following shape:

Important: if I use \"Border Radius\" I

Answer 1

Something like this would be roughly equivalent:

http://jsfiddle.net/ny4Q9/

css:

.curvetop {
    position: relative;
    margin-top: 80px;
    background: red;
    width: 100%;
    height: 400px;
    z-index: 1;
}

.curvetop:after {
    top: -80px;
    display: block;
    position: absolute;
    content: '';
    border-radius: 50%;
    background: red;
    width: 100%;
    height: 170px;
}

markup:

By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.