Half an oval shape in CSS

Question

I have managed to create an oval shape in CSS. How do I half this horizontally now?

http://jsfiddle.net/Lejqovqy/

.oval {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  border: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  -o-text-overflow: clip;
  text-overflow: clip;
  border: 1px solid #1abc9c;
}

<div class="oval"></div>

Answer 1

Using SVG:

I would recommend you to use SVG for creating half oval shapes as it is a lot more easier than doing it with CSS. Below is a sample snippet which uses an absolutely positioned SVG element and an arc path to create the half oval.

.oval {
  position: relative;
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-overflow: clip;
}
.oval svg, .shape svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
.oval path, .shape path {
  stroke: #1abc9c;
  fill: transparent;
}
.oval path:hover{
  fill: #1abc9c;
}

/* for the full shape */
.shape {
  position: relative;
  box-sizing: content-box;
  width: 300px;
  height: 150px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-overflow: clip;
}
#bottom-oval:hover{
  fill: #1abc9c;
}
  
span{
  position: absolute;
  color: #1abc9c;
  bottom: 30%;
  left: 50%;
}

<div class="oval">
  <svg viewBox='0 0 200 100' preserveAspectRatio='none'>
    <path d='M2,50 A98,48 1 1,0 198,50' />
  </svg>
</div>

<hr>

<!-- Just to illustrate the whole thing you're trying is possible with SVG -->
<div class="shape">
  <svg viewBox='0 0 200 150' preserveAspectRatio='none'>
    <path d='M2,8 2,92 A6,6 0 0,0 8,98 L80,98 M128,98 L192,98 A6,6 0 0,0 198,92 L198,8 A6,6 0 0,0 192,2 L8,2 A6,6 0 0,0 2,8' />
    <path d='M80,97 A24,20 1 1,0 128,97' id='bottom-oval'/>
  </svg>
  <span>+</span>
</div>

---

Using CSS Borders and Clip Path:

Another approach that could be adopted if you really want to use CSS borders is the clip-path along with inline SVG like in the below snippet. This just cuts out the top part of the ellipse and thus produces a half oval shape. This method can be useful if IE support is not required because clip-path is not supported in IE.

.oval {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-overflow: clip;
  border: 1px solid #1abc9c;
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,1 0,0.5 1,0.5 1,1z' />
    </clipPath>
  </defs>
</svg>
<div class='oval'></div>

Using Radial Gradients:

You could also use radial-gradient background image like in the below snippet to create semi oval shapes but the browser support for gradients in IE is only from IE10+ and the output also produces jagged edges which make it not really aesthetic. Due to those reasons, I wouldn't recommend this.

.oval {
  box-sizing: content-box;
  width: 200px;
  height: 50px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  text-overflow: clip;
  background: radial-gradient(ellipse 190px 90px at 50% 0%, transparent 48%, #1abc9c 48%, #1abc9c 50%, transparent 50%);
}

<div class="oval"></div>

Answer 2

Here is a half circle, and a semi-circle, with hover effect.

Edit

And a third approach, as Harry suggested, using pseudo element.

.div1{
     display: inline-block;
     height:45px;
     width:90px;
     border: 1px solid #999;
     border-width: 0 1px 1px 1px;
     -webkit-border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     border-radius: 0 0 90px 90px;
}
.div2{
     display: inline-block;
     margin-left: 20px;
     height:30px;
     width:90px;
     border: 1px solid #999;
     border-width: 0 1px 1px 1px;
     border-radius: 50% / 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
.div3 {
     display: inline-block;
     position: relative;
     height:90px;
     width:180px;
     border: 1px solid #999;
     border-radius: 10px;
}
.div3:after{
     content: "";
     position: absolute;
     top: 45px;
     left: 45px;
     height:30px;
     width:90px;
     border: 1px solid #999;
     border-width: 0 1px 1px 1px;
     border-radius: 50% / 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
.div3:before{
     content: "-\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0o";
     position: absolute;
     top: 20px;
     left: 66px;
}
div:hover {
     background-color: #DDD;
}
div:hover:after {
     background-color: #BBB;
}

<div class="div1"></div><div class="div2"></div>
<br /><br />
<div class="div3"></div>