Line Ends

In SVG, you can specify how the stroke at the end of lines behaves using the attribute stroke-linecap. In the examples below, we have added auxiliary bright lines with strokes and shown the possible values of stroke-linecap:

1. butt is the default value. When this value is set, the stroke simply ends at the ends of the line:

2. round, when this value is set, the stroke is evenly rounded around the ends of the line:

3. square, when this value is set, an additional stroke with rectangular edges is added around the ends of the line:

In CSS, the appearance of strokes where the lines bend can be controlled using the similar property stroke-linejoin.