How Can I Create a Half Circle Using Only CSS?

Creating a Half Circle Using Only CSS

Problem:

Can a semi-circular shape be created using CSS, without external tools or graphics, displaying as illustrated in the reference image?

Solution:

Utilizing Border-Radius and Border:

To achieve this effect, the CSS properties border-top-left-radius and border-top-right-radius can be leveraged to round the corners of a box based on its height and added borders. Borders are then applied to the top, right, and left sides of the box, completing the half-circle shape.

CSS Code:

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

This method effectively renders a half-circle using only a single div element.

Alternative Approach Using box-sizing: border-box:

Another option involves the box-sizing property, which can be set to border-box to factor in the borders when calculating 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;

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

Both methods effectively mimic a half-circle shape using CSS alone.

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