How to Draw a Partial Circle Outline in CSS (Open Ring Shape)

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>

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)

HTML5 / CSS3 Circle with Partial Border

Yes, it is possible - see this:

demo

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}

<div class='circle'>
  <div class='arc'></div>
</div>

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/

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>

Draw a hollow circle in SVG

Just use fill="none" and then only the stroke (outline) will be drawn.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />

</svg> 

How do I create a circle or square with just CSS - with a hollow center?

Try This

div.circle {

  -moz-border-radius: 50px/50px;

  -webkit-border-radius: 50px 50px;

  border-radius: 50px/50px;

  border: solid 21px #f00;

  width: 50px;

  height: 50px;

}

div.square {

  border: solid 21px #f0f;

  width: 50px;

  height: 50px;

}

<div class="circle">

  <img/>

</div>

 <hr/>

<div class="square">

  <img/>

</div>

---

Related Topics