How to Create a Half-Circle in CSS Using Only a Single Div?

Elegant CSS Solution for Creating Half-Circles

The challenge of creating a half-circle with CSS using only a single div and without external libraries can be resolved elegantly.

Utilizing Border-Radius and Borders

One approach is to use the border-top-left-radius and border-top-right-radius properties to round the corners of the box based on its height. This is combined with a border on the top, right, and left sides to achieve the half-circle effect.

CSS code:

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

Alternative with Box-Sizing

Another option is to use the box-sizing: border-box property to include border and padding in the calculation of the box's width and height. This allows for the use of exact values for the radius and border in the CSS.

CSS code:

<code class="css">.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;
}</code>

These approaches provide an elegant and CSS-only solution for creating half-circles, satisfying the requirements of using a single div and avoiding additional libraries.

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