The stroke property controls the paint used to draw the outline of vector shapes and glyphs — essentially the “pen” that traces a path. In SVG and other vector contexts it defines the visual paint (solid color, gradient, or pattern) applied to the path that forms the boundary of shapes such as , , and text glyphs. Unlike fills, which cover interior areas, the stroke paints along the path itself and therefore its visual result depends on the geometry of the path and how the stroke is combined with other painting steps.

The appearance produced by a stroke depends heavily on several companion properties that govern thickness, edges and dash patterns: for thickness you combine it with stroke-width; the shape of end caps is set by stroke-linecap; corner joins are controlled via stroke-linejoin; dashed outlines come from stroke-dasharray; and global transparency can be adjusted with stroke-opacity. In typical composition, stroke is often used together with fill so that an element can have a painted interior and a distinct outline; the visual balance between fill and stroke is a central aspect of vector styling.

Rendering details matter for how a stroke ultimately looks. By default a stroke is painted centered on the geometry of the path, so half the stroke’s visual thickness lies inside the shape and half outside — that interaction affects how adjacent strokes overlap and how joins appear at corners. The order in which stroke and fill are painted can change the final look; that order can be influenced by paint-order. For cases where transforms must not scale the stroke thickness, a vector-specific control such as vector-effect can be used to change how the stroke responds to transforms. These rendering behaviors make stroke a powerful tool for icons, diagrams, and typographic outlines, but also mean designers must consider how stroke metrics interact with path geometry and composition.

In practical use, designers combine stroke with line-cap and line-join settings to achieve crisp corners and smooth terminals, or with dash settings to create patterned or animatable outlines. Because stroke is fundamentally a paint applied to a path rather than a box-model border, techniques that work for CSS boxes (such as borders) are not a substitute for true vector strokes when precision on curves and joins is required.