CSS Half Circle

CSS provides a very useful property for borders - Border Radius. With radius provided, the borders are rounded and the degree of rounding depends on the value of radius. And just like border style and width, the radii of all four vertices are independent of each other.

Following is how a box would like with a small border-radius.

<div class='box'></div>

.box {
  height: 10rem;
  width: 10rem;
  border-radius: 1rem;
  background-color: #48abe0;
}

What would happen if the radius of borders was equal to or more than half of the box’s width? You likely guessed it right. We get a circle.

<div class='circle'></div>

.circle {
  //... rest of the styles from last example
  border-radius: 5rem;
}

Now, if we want to draw a semi-circle, how can we achieve it? One may think that reducing the height to half the value would solve the issue. Let’s give it a shot.

.circle {
  // rest of the styles from last example
  height: 5rem;
}

What we need to do, alongside reducing the height to half, is to have a radius only for top corners.

<div class='semi-circle'></div>


.semi-circle {
  height: 5rem;
  width: 10rem;
  border-radius: 5rem 5rem 0 0;
}

<div class='semi-circle'></div>

div {
  margin: 1rem auto;
  background-color: #48abe0;
}

.semi-circle {
  width: 20rem;
  height: 10rem;
  background-color: #48abe0;
  border-radius: 10rem 10rem 0 0;
}

Use Cases

You can use the half-circle to build informational widgets like this one:

See the Pen Navigation Text Rotator by Elizabet Oliveira (@miukimiu) on CodePen.

You may need to build a theme element, say a logo, that is comprised of half circles:

See the Pen Half Circle With CSS by Bosko (@BoskoMali) on CodePen.

You could also be building a loader which comprises of animated half-circles:

See the Pen CSS Half Circle by Steve Marx (@xram) on CodePen.

You may be building a widget that requires circular transitions/animations effect:

See the Pen Half Circle Hover Effect by Nick Iaconis (@nickiaconis) on CodePen.

Conclusion

CSS provides a very powerful property of border-radius. Applied with element dimensions and border widths, it helps us achieve shapes that are not provided out-of-the-box. One such example is a half-circle. By applying only top radii to a circle and halving its height, we can create a half-circle.