How to Draw an Incomplete Circle with CSS and in It How to Put a Picture

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)

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>

How to draw a circle sector in CSS?

CSS and Multiple Background Gradients

Rather than trying to draw the green portion, you could draw the white portions instead:

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

pie {
  width: 5em;
  height: 5em;
  display: block;
  border-radius: 50%;
  background-color: green;
  border: 2px solid green;
  float: left;
  margin: 1em;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
  background-image: linear-gradient(90deg, white 50%, transparent 50%);
}

/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
  background-image: none;
}

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

Drawing half a circle in CSS

Something like this would probably work:

.box {

  width: 604px;

  border-width: 0 1px 1px;

  border-color: #ddd;

  border-style: solid;

  overflow: hidden;

}

.circles {

  border-top: 1px solid #ddd;

  display: flex;

  list-style-type: none;

  margin: 0;

}

.circles li {

  background-color: white;

  width: 30px;

  height: 30px;

  border-radius: 100%;

  border-width: 0 1px 1px;

  border-color: #ddd;

  border-style: solid;

  margin: 0 17px;

  position: relative;

  transform: translateY(-50%);

}

<div class="box">

  <ul class="circles">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

  Circles for the win

  

</div>

Css circle with border that is hollow inside?

You can use poiner-events: none to delegate clicks and hovers to covered elements.
This works for all major browsers and for IE since version 11.

.inner-circle{

  display: inline-block;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border-style: solid;

  border-width: 2px;

  border-color: blue;

  background-color: rgba(0, 0, 0, 0);

  position: absolute;

  top:0;

  left:0;

  pointer-events:none;

}

<input type="checkbox" />

<span class="inner-circle"></span>

CSS one side cut circle image with border

The simplest solution is probably just to make an SVG.

<svg width="400px" height="400px" viewBox="0 0 1 1"

     overflow="visible">

  <defs>

    <mask id="myMask" x="0" y="0" width="1" height="1"

          maskContentUnits="objectBoundingBox" fill="white">

      <path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/>

    </mask>

  </defs>

  <image xlink:href="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg"

         x="0" y="0" width="1" height="1" mask="url(#myMask)"/>

  <use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/>

</svg>

---

Related Topics