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.

Signora

“New opinions are always suspected, and usually opposed, without any other reason, but because they are not already common.” ― John Locke – Cornute

@Signora - the question could have been improved because you wrote "I'm trying to create a circle with CSS" but you failed to share the code you tried and you're asking for code. Long-term SO users don't like this, as they believe you haven't tried anything and are looking for somebody to do the work for you. This is outlined in SO's FAQs and has been for many years. I'm not being a stickler for the rules here, I'm just explaining why you initially got down-voted and answering your question "How should I improve this question?". This question provided some good information, so thanks. – Managua

@MartinJames I strongly disagree. I have explained my approach - without any code attached, certainly, but I don't see how a failed code could improve the question in any way. The question is clearly not related to a problem in any code snippet. You may prove that the question could be better phrased, stated more clearly with an unsuccessful piece of code, but I'm still skeptic. Moreover, I recommend to you not to down vote a question, if the questioner fails to provide initial code. That could easily happen to anyone. Also, not a single down voter suggested any improvement on the question. – Signora

I'm with Martin. You said "I tried to draw a full circle and it doesn't work but I'm looking for a more elegant alternative.". How are users of SO supposed to come up with a "more elegant alternative" if they don't know what it is you tried? Alternative to what?! You also said "The question is clearly not related to a problem in any code snippet" but it is, you said the code you wrote didn't work! I hate to say it but this also isn't the place for an argument. You asked how your question could be improved and somebody kindly replied for you. If you don't like the criticism, don't ask for it. – Unofficial

@Unofficial But I think the worst thing that happened here is that you used quotation while you intentionally edited it to be able to somehow prove point. I let you to reflect on the possibility that this was a mistake and the part you removed was clearly to bend your argument to a stable ground - where is none. – Signora

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)

Zinfandel

@PaulRoub IMO, my approach is not superior to yours as they both won't work in IE8 and lower :) (because of border-radius property) – Zinfandel

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>

Rajab

Answer 3

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>

Eran

Answer 4

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%;

Anapest

This only shows a half filled circle, not a half outline circle. – Earleneearley

Answer 5

Add a border to the semi-circle and remove the border-bottom

#semi-ring{
  height: 100px;
  /* width = 2* height */
  width: 200px;  
  border: 30px solid black;
  /* border-radius = height + border */
  border-radius: 130px 130px 0 0;
  border-bottom: transparent;
}

<div id="semi-ring"></div>

Secretion

Answer 6

An idea using gradient:

.box {
  width: 200px;
  aspect-ratio: 2;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(50% 100% at bottom,#0000 80%,red 80.5%);
}

<div class="box"></div>

Redan