How to draw Semi circle with css

Question

I'm trying to create a semi-circle with CSS, which looks as below.

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

I have tried to create a semi-circle with one circle, and one rectangle where the rectangle hides the lower part of the circle.

I know this isn't the best way to do it. So I am looking for a better approach using a single div.

There is a similar question on creating a semi-circular ring on Stackoverflow. Unfortunately, that didn't help.

Anjan Talatam · Accepted Answer · 2022-12-31T12:17:08.763

1

Top Semi Circle

.semi-circle {
  height: 50px;
  /* width = 2 * height */
  width: 100px;
  /* border-radius top-left, top-right = height */
  border-radius: 50px 50px 0 0;
  background: #5d95c6;
}

Use same algo to create right, bottom or left semi-circle

or You can rotate the existing semi-circle as below

/*  right semi-circle  */
transform: rotate(90deg);

/*  bottom semi-circle  */
transform: rotate(180deg);

/*  left semi-circle  */
transform: rotate(270deg);

Live Codepen

.semi-circle {
  /* Scale the semi-circle by changing the height variable*/
  --height:50px;
  
  height: var(--height);
  width: calc(2*var(--height));
  border-radius: var(--height) var(--height) 0 0;
  background: #5d95c6;
}

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

edited Dec 31 '22 at 12:17

answered Dec 31 '22 at 11:36

Anjan Talatam

2,212
1
12
26

This css would be a perfect candidate for using CSS Variables so by changing just one variable you can make the semi-circle larger,smaller – Professor Abronsius Dec 31 '22 at 11:44
@ProfessorAbronsius Thanks for the suggestion. I have made the changes. – Anjan Talatam Dec 31 '22 at 12:18

How to draw Semi circle with css

1 Answers1

Top Semi Circle