Svg Path Border Radius

SVG path border radius

If your path was just a single open curve that ran from 12 o'clock to 10 o'clock, then it would be easy. You could just add stroke-linecap="round".

<svg xmlns="http://www.w3.org/2000/svg">  <path d="M 80 18.75 A 61.25 61.25 0 1 1 30.45 44.00"        fill="none" stroke="black" stroke-width="17.5" stroke-linecap="round"></path></svg>

Border radius in SVG

I am not sure there is way to round SVG in HTML (like apply CSS?), but you can use an SVG to the editor to the edits. I use Figma to edit this, but any vector-based graphic solution should be fine I guess.

<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>

Rounding the corners of an SVG

The easiest solution is probably to use the border-radius CSS property on the svg wrapper element. It will allow you to clip round corners on your svg element and expose the background color behind the svg.
Here is an example :

body {
  background: darkorange;
}

#wrapper {
  display: block;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  border:10px solid pink;
}

<svg id="wrapper" viewBox="0 0 100 100">
  <svg>
    <rect fill="teal" x="0" y="0" width="100" height="100"/>
   </svg>
</svg>

how to create rounded corners in svg

You can use stroke-linejoin="round" and pick a suitable stroke-width.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="-100 -100 1200 1000">  <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linejoin="round" stroke="black" stroke-width="80"/></svg>

SVG path element round corner thickness

Your stroke is correctly sized, but its being cut off by the viewport. You could expand your viewport by adding a viewBox that is offset to the left and top by half your stroke-width (ie. 12/2=6), and has a width and height of your path but including two halves of your stroke-width that are missing (ie. 2*6=12):

viewBox="-6 -6 609 416"

<svg width="597" height="404" viewBox="-6 -6 609 416">    <g class="cardBG" opacity="0.8">        <path             d="M104,0               h388.8571428571429               a104,104 0 0 1 104,104               v195.48571428571427               v104               h-104               h-388.8571428571429               h-104               v-104               v-195.48571428571427               a104,104 0 0 1 104,-104z" fill="none"             stroke="#000000" stroke-width="12">        </path>    </g></svg>

Is there a way to make svg icon path edges partially rounded - using css?

If your progress gauge rendering is based on a stroke-dasharray concept – you might use a svg filter to round the edges:

Example svg filter:

let inputRange = document.querySelector('#range');
let progress = document.querySelector('.progress');
inputRange.addEventListener('change', function(e) {
  let val = e.currentTarget.value;
  progress.setAttribute('stroke-dasharray', val + ' 100')
})

.layout {
  width: 80vmin;
  margin: 0 auto;
}

.progress {
  transition: 0.3s;
}

.progress-rounded {
  filter: url(#roundEdges);
}

.svgPieAsset {
  display: block;
  border: 1px solid #ccc;
}

.svgAsset {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

<div class="layout">
  <p style="text-align:center">Progress: <br />
    <input id="range" type="range" min="0" max="100" value="60" step="10">
  </p>
  <svg class="svgPieAsset" viewBox="0 0 100 100">
      <symbol id="gauge">
        <circle transform="rotate(-90)" transform-origin="center" id="circle" class="percent" cx="50%" cy="50%" r="45%" fill="none" stroke-width="10%" pathLength="100" />
      </symbol>
      <use class="segment-bg" href="#gauge" stroke="#eee" />
      <use class="segment progress progress-rounded" href="#gauge" stroke="red" stroke-dashoffset="0" stroke-dasharray="60 100" />
    </svg>
</div>

<svg class="svgAsset" aria-hidden="true">
  <defs>
    <filter id="roundEdges">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0.75" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 5 -2.5" result="round" />
      <feComposite in="SourceGraphic" in2="round" operator="atop" />
    </filter>
  </defs>
</svg>

Svg Path Border Radius