How to create a half circle using css

If you’re on a free Medium plan, click here to read — Free Access

For more questions and answers visit our website at Frontend Interview Questions

To create a half circle using CSS, we can use the border-radius property to create a circular shape and then use the overflow property to hide the bottom half of the circle.

Here’s an example of how to do it:

HTML:

<div class="half-circle"></div>

CSS:

.half-circle {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  background-color: red;
}

In this example, we’ve created a div element with a class of half-circle. We’ve set the width and height of the element to 200px and 100px respectively, which gives us an elliptical shape. We’ve then used the border-radius property to create a circle by setting the top-left and top-right border radii to 100px, and the bottom-left and bottom-right border radii to 0, which gives us the appearance of a half circle.

Next, we’ve set the background color of the half circle to red to make it more visible.

You can adjust the dimensions, border radii, colors, and other properties to create half circles of different sizes and styles.