Half Circle with CSS (Border, Outline Only)

Half circle with CSS (border, outline only)

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)

How to draw a half circle (border, outline only)

<div style="
  width: 400px;
  height: 400px;
  border-radius: 200px;
  border: 10px solid black;
  border-right: 10px solid white;
  border-bottom: 10px solid white;
  -webkit-transform:rotate(-45deg);
"></div>

http://jsbin.com/wedudine/1/

Need CSS for half filled Circle (at the bottom) with border

div {

  height: 100px;

  width: 100px;

  border: 10px solid #ffa500;

  border-radius: 50%;

  overflow: hidden;

}

div>div {

  border-radius: 0;

  height: 50%;

  border: 0;

}

div>div:nth-child(n+2) {

  background: #ffa500;

}

<div>

  <div></div>

  <div></div>

</div>

Is it possible to draw a partial circle outline in CSS (open ring shape)?

To create a circle that gradually draws it's outer path, use SVG.

SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself.

Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

circle {

  fill: white;

  stroke: black;

  stroke-width: 2;

  stroke-dasharray: 250;

  stroke-dashoffset: 1000;

  animation: rotate 5s linear infinite;

}

@keyframes rotate {

  to {

    stroke-dashoffset: 0;

  }

}

<svg height="100" width="100">

  <circle cx="50" cy="50" r="40" />

</svg>

Div with half circle in the midle

One way of doing it:

* {margin: 0; padding: 0; box-sizing: border-box}

html, body {height: 100%}

body {

  display: flex;

  justify-content: center;

  align-items: center;

  background: #f00;

}

.black {

  display: flex;

  justify-content: center;

  width: 200px;

  height: 200px;

  background: #000;

}

.white {

  position: relative;

  top: -25px;

  width: 50px;

  height: 50px;

  border: 2px solid #f00;

  border-radius: 50%;

  background: #fff;

}

<div class="black">

  <div class="white"></div>

</div>

CSS Half Circle border with gradient color

You can do it like below:

.progress-semi-circle {
  --b: 20px; /* border size */
  --a: 64;   /* percentage*/

  position: relative;
  width: 180px;
  aspect-ratio: 2;
  display: inline-grid;
  grid-auto-flow: column;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  place-content: end center;
  background: radial-gradient(farthest-side at bottom, #0000 calc(99% - var(--b)), #262925 calc(100% - var(--b)));
}

.progress-semi-circle:before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask:
     conic-gradient(from calc(var(--a)*1.8deg - 90deg) at bottom ,#000 50%, #0000 0),
     radial-gradient(farthest-side at bottom, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  background: linear-gradient(red,blue); /* your gradient */
}

<div class="progress-semi-circle">
  <span>64</span>%
</div>

<div class="progress-semi-circle" style="--a:50">
  <span>50</span>%
</div>

<div class="progress-semi-circle" style="--a:20">
  <span>20</span>%
</div>

---

Related Topics