Cara menggunakan half circle 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;
}

Try it Now  

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

Try it Now  

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.

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-dotted to only apply the border-dotted utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:border-dotted to apply the border-dotted utility at only medium screen sizes and above.

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.

Share on Twitter · Share on Facebook

UnusedCSS helps website owners remove their unused CSS every day. See how much you could save on your website: