Search code examples
htmlcsssvgcss-shapes

How to create circle with empty border sector and with rounded border around that sector corners

All info on the picture. My code for a second solution: 

<div class="content">
  <div class="circle">
  </div>
</div>

.content {
  width: 300px;
  padding: 50px;
  background: #3f63d3;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid #fff;
  border-top-color: transparent;
  transform: rotate(45deg);
}

Here is a JSFiddle example. Any ideas?

Image Example:

Image with expected output

P.S.: Red circles on image - is not a part of issue, it's just a sample what I'm talking about :)

Solution

  • As Paulie_D mentioned in his comment, the best way to achieve what you need is to use SVG. It can be done with a single path element by setting the stroke-linecap as round. We can then position it within a HTML div container (absolute positioning, if required).

    You can find detailed information about SVG's path element and its various commands in this MDN tutorial.

    svg {
  height: 100px;
  width: 100px;
  fill: none;
  stroke: red;
  stroke-width: 8;
  stroke-linecap: round;
}
    <svg viewBox='0 0 100 100'>
  <path d='M95,50 A45,45 0 0,1 5,50 A45,45 0 0,1 50,5' />
</svg>

    It might be possible to do this with CSS but it will be ultra complex compared to SVG (especially when the arc's angle can vary - it will then need adjustments to positioning etc in CSS whereas SVG needs no change at all even if the arc's angle varies).