How to create a half circle with CSS?

With CSS we can easily create the most commonly used shapes like circles, half circles, triangles, etc. In this tutorial, I will walk you through the simple steps of creating a half circle with pure CSS.

From the CSS point of view, a half circle is nothing but a rectangle with any of its two corners rounded. So, in simple words, to create a half circle using CSS all we need to do is make the element’s corners rounded.

To create rounded corners in CSS, we could use the border-radius and its constituents properties.

Here an important question arises, can we make any size element a half circle? Well, the answer is No. If you want to make an element a perfect half circle, its width should be 2 times its height and its individual corner’s border radius should be same as its height value.

Let’s understand it with examples.

Create a top half circle with CSS

To create a top half circle, we could use the border-top-left-radius and border-top-right-radius properties to make its top corners rounded.

Remember that the element’s width should be two times its height and the top corners radius should be same as its height.

Here is a working example:

Example:

div{
    width: 300px;
    height: 150px;
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    background: orange;
}

Create a bottom half circle with CSS

To create a bottom half circle, we could use the border-bottom-left-radius and border-bottom-right-radius properties to make its bottom corners rounded. Other rules will remain the same.

Here is a working example:

Example:

div{
    width: 300px;
    height: 150px;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    background: orange;
}

Create a left half circle with CSS

If you want to create a left half or a right half-circle, the rules get reversed. Now the height of the element must be two times its width and the border radius of respective corners must be same as the width value.

To create a left half circle, we could use the border-top-left-radius and border-bottom-left-radius properties to make the left corners rounded.

Here is a working example:

Example:

div{
    width: 150px;
    height: 300px;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    background: orange;
}

Create a right half circle with CSS

If you want to create a right half circle, the rules will be same as creating a left half circle.

Here, we could use the border-top-right-radius and border-bottom-right-radius properties to make the right corners rounded.

Here is a working example;

Example:

div{
    width: 150px;
    height: 300px;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    background: orange;
}

Create half circle rotation animation

Example:

div{
    width: 110px;
    height: 55px;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    background: coral;
    animation: rotate 4s linear infinite;
    transform-origin: 50% 100%;
}
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}