半圆与 CSS (边框，只轮廓)

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).

Then add a border to top/right/left sides of the box to achieve the effect.

Here you go:

.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
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;
}

WORKING DEMO.

Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.

.half-circle {
width: 200px;
height: 100px; /* as the 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;
}

UPDATED DEMO. (Demo without background color)

I had a similar issue not long time ago and this was how I solved it

.rotated-half-circle {
/* Create the circle */
width: 40px;
height: 40px;
border: 10px solid black;
border-radius: 50%;
/* Halve the circle */
border-bottom-color: transparent;
border-left-color: transparent;
/* Rotate the circle */
transform: rotate(-45deg);
}

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

I use a percentage method to achieve

        border: 3px solid rgb(1, 1, 1);
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;

Below is a minimal code to achieve the effect.

This also works responsively since the border-radius is in percentage.

.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}

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

try this:

.top {
height: 30px;
width: 30px * 2;
border-top-left-radius: 30px * 2;
border-top-right-radius: 30px * 2;
}

 <div class="top"></div>