how to make a stroke rounded-CodePudding

I'm creating a progress circle but I want the edge of the progress circle line to be rounded, this is how it looks and this is how I want it to look.

here is my code

  const strokeWidth = 2;
  const center = size / 2;
  const radius = size / 2 - strokeWidth / 2;

       <Circle
          ref={progressRef}
          stroke="#FFF"
          cx={center}
          cy={center}
          r={radius}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
      />

CodePudding user response：

You can use strokeLinecap prop on the Path to round:

<Path
  stroke="black"
  fill="none"
  strokeLinecap="round"
  strokeWidth={strokeWidth}
  strokeDasharray={circumference}
/>

Found Here