html - Semi-oval with CSS -

i'm trying create mix between oval , semi-circle.

semi-circles can created such in css:

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

and ovals can made this:

.oval {      background-color: #80c5a0;     width: 400px;     height: 200px;     margin: 100px auto 0px;     border-radius: 200px / 100px; } 

but how can make semi-oval? here's attempt far. problem happens i've got flat tops, found here. thanks!

i've updated demo 1 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 border-radius should keep smooth semi-ellipse regardless of width , height values.

with few minor changes, here's how you'd render 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>