I’m not sure this is what youre looking for but cant hurt looking right?

So here is my example:
https://jsfiddle.net/b3h0tqye/57/

I simply changed the following lines:

<circle class="background" r="27%" cx="50%" cy="50%" style="stroke-width:1;"></circle>
 <circle class="background" r="22%" cx="50%" cy="50%" style="stroke-width:1;"></circle>

How to create regulated oval progress bar using only HTML&CSS?

My jsfiddle try works but looks different (without insideoutside border or padding)

<svg viewBox="0 0 64 64" class="pie">
   <circle class="background" r="25%" cx="50%" cy="50%"></circle>
   <circle class="chart" r="25%" cx="50%" cy="50%" stroke-dasharray="85 100"></circle>
</svg>