The stroke-linejoin CSS property controls how the junction between two connected segments of a shape’s outline is rendered. It determines the geometry used where two path segments meet, so it directly affects the silhouette of corners and the overall visual style of stroked shapes. Because joins are created where directions change, this property is most noticeable on polylines, polygons, and any path with sharp angles.

The visual outcome of the join choice can range from producing extended pointed spikes at acute corners, to chopping those spikes off to create a flattened intersection, or smoothing the corner into a rounded transition. Those differences influence perceived weight, contrast and legibility: the same path with different joins can look heavier, lighter, crisper, or softer. Joins also affect the rendered bounding area of the stroke, which in turn can influence layout decisions, hit testing, and clipping when stroke geometry interacts with other elements.

In practice this property should be considered alongside other stroke-related properties because they jointly determine final appearance. For example, stroke thickness and how it’s measured matter — see stroke-width — as does the stroke color and pattern — see stroke. The length of any pointed extension can be constrained by a miter limit — see stroke-miterlimit — and the treatment of open path ends is controlled by a related property — see stroke-linecap. When applying transforms, you may also want to consider whether the stroke should scale with the object — see vector-effect — since scaling changes how joins look at different sizes.

Choosing an appropriate join style depends on the design goals: for iconography and small-scale graphics, avoiding long pointed joins can reduce visual artifacts and aliasing; for technical diagrams, crisp corners may be preferable to preserve geometry. When animating path geometry or stroke width, be mindful that changing joins can introduce abrupt visual changes; smoothing transitions or using rounded joins can give more visually pleasing motion.