stroke-linecap

The stroke-linecap attribute indicates the shape to be rendered at the end of an open line. The options are butt, round, square, and inherit. The following code sample shows the different rendering options in action. The two red lines are there to show the difference between butt and square. butt ends the stroke flush with the ends of the line. The square cap extends beyond the end of the line to include the thickness of the stroke's:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="400"
   viewBox="0 0 500 400" version="1.1"> 
 <line fill="none" stroke-width="20" stroke="#000000" x1="20" y1="100" 
    x2="450" y2="100" stroke-linecap="butt" /> 
 <line fill="none" stroke-width="20" stroke="#000000" x1="20" y1="200"
    x2="450" y2="200" stroke-linecap="round" /> 
 <line fill="none" stroke-width="20" stroke="#000000" x1="20" y1="300"
    x2="450" y2="300" stroke-linecap="square" /> 
 <line fill="none" stroke-width="2" stroke="rgba(255,0,0,1)" x1="20" 
    y1="0" x2="20" y2="400" /> 
 <line fill="none" stroke-width="2" stroke="rgba(255,0,0,1)" x1="450" 
    y1="0" x2="450" y2="400" /> 
</svg> 

The result of this can be seen in the following screenshot: