How to Create Perfect Half-Circles in CSS Using a Single Div?

Creating Half Circles with CSS

Creating circular shapes in CSS can pose a challenge. If you're seeking an elegant solution to generate perfect half-circle shapes using only a single div and CSS definitions, here's what you need to know:

The Perfect Blend: Border-Radius and Borders

To achieve the desired half-circle effect, we leverage the properties border-top-left-radius and border-top-right-radius. These properties round the corners of our target box based on its height and added borders.

CSS Implementation

Consider the following CSS code:

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* half of the width */
    border-top-left-radius: 110px;  /* height + border */
    border-top-right-radius: 110px; /* height + border */
    border: 10px solid gray;
    border-bottom: 0;
}</code>

How It Works

The border-top-left-radius and border-top-right-radius properties ensure the target box's top corners are rounded. By setting these values to the sum of the box's height and the border thickness (10px), we create curves that seamlessly connect with the straight lines of the left and right borders.

Alternative Approach: Box-Sizing

Alternatively, we can utilize the box-sizing property to include borders and padding in the calculation of the box's width and height:

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    box-sizing: border-box;
}</code>

Conclusion

With these CSS techniques, you can now effortlessly create elegant half-circle shapes that elevate the visual appeal of your web designs.

The above is the detailed content of How to Create Perfect Half-Circles in CSS Using a Single Div?. For more information, please follow other related articles on the PHP Chinese website!