How Can I Create a Half Circle Using CSS Borders and Outlines?

Creating a Half Circle with CSS Using Borders and Outlines

In an attempt to construct a semi-circle within a single div element using CSS, one may encounter various techniques. This article presents a refined solution employing border-top-left-radius and border-top-right-radius properties to curvature the corners of the box.

To achieve this effect, simply add a border to the top, right, and left sides of the box, while eliminating the border at the bottom. This approach effectively creates a visually pleasing and elegant semi-circle.

For instance, consider the following CSS definition:

.half-circle {
   width: 200px;
   height: 100px;
   background-color: gold;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border: 10px solid gray;
   border-bottom: 0;
}

By setting the height of the box to half of its width, along with appropriate border-radius values and a suitable border, you can effortlessly render a seamless half circle.

An alternative approach involves utilizing the box-sizing property to account for the width and height of the box, inclusive of borders and padding. This technique eliminates the need for additional calculations and ensures consistency in the final result.

.half-circle {
   width: 200px;
   height: 100px;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border: 10px solid gray;
   border-bottom: 0;

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

This modified approach provides flexibility in styling and ensures the desired half circle is consistently rendered across different browsers. By leveraging the power of CSS borders and radii, you can effortlessly create visually appealing and effective semi-circular elements in your web designs.

The above is the detailed content of How Can I Create a Half Circle Using CSS Borders and Outlines?. For more information, please follow other related articles on the PHP Chinese website!