CSS3 background carve or radius issue

Question

I am trying to create background carve in CSS. Take a look in the picture below.

How can I add radius like this in CSS3? Anyone can help?

Answer 1

Use:

border-top-left-radius: 50%;
border-top-right-radius: 50%;

I made an example of it here: http://jsfiddle.net/DFs6H/2/

Answer 2

Add another div on the bottom with a border radius.

html:

<div class="content">
    <div class="bottom_border"></div>
</div>

css:

.content{
    background:#CCC;
    height:100px;
    width:100px;
    position:relative;
   overflow:hidden
}
.bottom_border {
    position:absolute;
    top:0;
    bottom:0;
    background:#FFF;
    width:100px;
    height:20px;
    top:90px;
    bottom:-10px;
    border-radius: 50%
}