title: Rounded corners in SVG path semi circle
body: <p>I have a path which is a semi-circle. How do I make the corners rounded? I do not want to use <code>stroke-linecap: round</code> as I need it to be rounded only on these corners:
  <a href="https://i.stack.imgur.com/H8BHI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H8BHI.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;g&gt;
      &lt;!--background --&gt;
      &lt;path fill="none" stroke-dasharray="" stroke-width="16" stroke="#607985" d="M30 100 A 40 40 0 0 1 170 100"&gt;&lt;/path&gt;
      &lt;!-- strokes --&gt;
      &lt;path id="meter-back" fill="none" stroke-width="15" stroke="white" d="M30 100 A 40 40 0 0 1 170 100"&gt;&lt;/path&gt;
      &lt;!--progress --&gt;
      &lt;path id="meter-fill" fill="none" stroke-dashoffset="219.942" stroke-dasharray="109.971, 109.971" stroke="rgba(96,121,133,0.7)" stroke-width="15" d="M30 100 A 40 40 0 0 1 170 100" stroke="#607985"&gt;&lt;/path&gt;
  
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>