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

You can use border radius

http://jsfiddle.net/wULyB/

CSS

#out{
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: green;
    position: relative;
}
#in{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: black;
    position: absolute;
    left: -50px;
    top: 30px;
}

You can play around with the numbers but you get the idea