Sergey A Sergey A - 2 years ago 80
HTML Question

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">

.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 :)

Answer Source

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' />

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download