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 get this (and I do not want this result):

Answer 1

Here are DEMO

HTML:

<div id="gray">
    <div id="red"></div>
</div>

CSS:

#gray{

  height: 100%;
  background-color: #ccc;
  overflow: hidden;  
}

#red{

  width: 150%;
  height: 150%;
  background-color: #f00;
  border-radius: 100%;
  top: 50%;
  left: -25%;
  right: 0;
  position: relative;
}

Answer 2

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:

<div class="curvetop"></div>

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.

Answer 3

You can use border radius

http://jsfiddle.net/wULyB/

<div id="out">
    <div id="in"></div>

</div>

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