CSS - Semicircle

A HTML & CSS code example to create a semicircle shape.

The HTML element for this code example has a <div> tag with class name "semicircle" for the semicircle shape element.

<div class="semicircle"></div>

A semicircle is created by rounding two corners of a rectangle element with the "border-radius" property.

For a semicircle rounded on the right, specify "border-radius: 0 75px 75px 0".

For a semicircle rounded on top, set "width" to "150px", "height" to "75px" and "border-radius: 0 0 75px 75px".
For a semicircle rounded on bottom, "border-radius" is "75px 75px 0 0".

.semicircle {
	--w: 300px; /* Base Size */
	--angle: 0deg;  /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.semicircle::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 25%;
	width: 40%;
	height: 80%;
	background: #1e90ff;
	border-radius:  calc(var(--w) * 0.5) 0 0  calc(var(--w) * 0.5);
}