Semi-oval with CSS

Question

I\'m trying to create a mix between an oval and a semi-circle.

Semi-circles can be created as such in CSS:

.halfCircle{
     height:45px;
     width         


        

Answer 1

http://jsfiddle.net/QGtzW/4/

.halfOval { 
    background-color: #a0C580;
    width: 400px;
    height: 100px;
    margin: 100px auto 0px;

    /* top-right top-left bottom-left bottom-right */
    /* or from 10.30 clockwise */
    border-radius: 50% 50% 0 0/ 100% 100% 0 0;
}

Answer 2

I've updated your demo with one possible solution:

div {
  background-color: #80C5A0;
  width: 400px;
  height: 100px;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

<div></div>

By using percentage based units for the border-radius it should always keep a smooth semi-ellipse regardless of your width and height values.

With a few minor changes, here's how you'd render the semi-ellipse split in half vertically:

div {
  background-color: #80C5A0;
  width: 400px;
  height: 100px;
  border-radius: 100% / 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<div></div>

Answer 3

We can use css3 radial-gradient() as well to draw this shape:

.halfOval {
  background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
}

.halfOval {
  background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
  margin: 50px auto;
  height: 100px;
  width: 400px;
}

<div class="halfOval"></div>