Semi-oval with CSS

css, css-shapes, html

Solution

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>

Problem

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: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 be made like this: ``` .oval { background-color: #80C5A0; width: 400px; height: 200px; margin: 100px auto 0px; border-radius: 200px / 100px; } ``` 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 here. Thanks!

Original source

Related problems