Half circle with CSS (border, outline only)

Question

I'm trying to create a circle with CSS, which looks exactly like on the following picture:

...with only one div:

<div class="myCircle"></div> 

and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.

I've tried to draw a full circle and fading half of it with another div, and it does work, but I'm looking for a more elegant alternative.

Answer 1

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)

Answer 2

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>