stroke-linejoin

The stroke-linejoin attribute defines the way that the corners of paths and basic shapes are rendered. The possible values are miter, round, bevel, and inherit. Round renders smoothly curved corners, miter produces sharp edges with only one angle for the corner, and bevel adds a new angle to the corner to create a compound corner:

  <svg width="400" height="300" viewBox="0 0 400 300" 
    xmlns="http://www.w3.org/2000/svg"> 
  <rect x="50" y="20" width="300" height="50" fill="none" 
    stroke="#000000" stroke-width="20"  stroke-linejoin="miter"></rect> 
  <rect x="50" y="100" width="300" height="50" fill="none" 
     stroke="#000000" stroke-width="20"   stroke-linejoin="bevel">  
  </rect> 
  <rect x="50" y="180" width="300" height="50" fill="none" 
     stroke="#000000" stroke-width="20"  stroke-linejoin="round">
   </rect> 
 </svg> 

These options can be seen in the following screenshot: