HTML

svg rounded corners

<!-- How to round corners in <path> -->
<!-- For other linejoins please see
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin -->

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
        stroke-linejoin="round" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3"
          stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>

line round corners svg

 <line x1="80" y1="200" x2="240" y2="200" stroke-width="10"
       stroke-linecap="round" />
<!--"stroke-linecap" can be usedas a CSS property
You can use this attribute with the following SVG elements:
<altGlyph> <path> <polyline> <line> <text> <textPath> <tref> <tspan>
 -->

rounded borders svg

<rect height="8" fill="#2f80ed" rx="5" ry="5" x="0" y="0" data-testid="lang-progress" width="2%">