title: Semi-oval with CSS
body: <p>I'm trying to create a mix between an oval and a semi-circle. </p>
  
  <p>Semi-circles can be created as such in CSS:</p>
  
  <pre><code>.halfCircle{
       height:45px;
       width:90px;
       border-radius: 90px 90px 0 0;
       -moz-border-radius: 90px 90px 0 0;
       -webkit-border-radius: 90px 90px 0 0;
       background:green;
  }
  </code></pre>
  
  <p>And ovals can be made like this:</p>
  
  <pre><code>.oval { 
      background-color: #80C5A0;
      width: 400px;
      height: 200px;
      margin: 100px auto 0px;
      border-radius: 200px / 100px;
  }
  </code></pre>
  
  <p>But how can I make a semi-oval? Here's my attempt so far. The problem that happens is I've got flat tops, found <a href="http://jsfiddle.net/QGtzW/">here</a>. Thanks!</p>