geometry - 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;
}