[ @sdxc/u/color ]

stroke-linejoin

Sets stroke-linejoin, the SVG paint property controlling how a <path>/<polyline>/<polygon> shape's stroke renders at a corner between two segments.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { strokeLinejoin } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.strokeLinejoin("round")`	`css({ strokeLinejoin: "round" })`

Examples

Basic example

Use strokeLinejoin to set how the corners between two segments of a stroke are drawn:

<svg width={300} height={80} viewBox="0 0 300 80" aria-hidden="true">
	<polyline
		points="10,70 40,15 70,70"
		mix={[stroke("brand"), fill("none"), strokeWidth(12), strokeLinejoin("miter")]}
	/>
	<polyline
		points="115,70 145,15 175,70"
		mix={[stroke("brand"), fill("none"), strokeWidth(12), strokeLinejoin("round")]}
	/>
	<polyline
		points="220,70 250,15 280,70"
		mix={[stroke("brand"), fill("none"), strokeWidth(12), strokeLinejoin("bevel")]}
	/>
</svg>

Rounded icons

Pair round joins with round caps for the soft corners of a line icon:

<div mix={[...]}>
	<svg
		mix={[stroke("brand"), fill("none"), strokeWidth(3), strokeLinejoin("miter")]}
		viewBox="0 0 24 24"
		width={64}
		height={64}
		aria-hidden="true"
	>
		<path d="M4 12l5 5L20 6" />
	</svg>
	<svg
		mix={[
			stroke("brand"),
			fill("none"),
			strokeWidth(3),
			strokeLinejoin("round"),
			strokeLinecap("round"),
		]}
		viewBox="0 0 24 24"
		width={64}
		height={64}
		aria-hidden="true"
	>
		<path d="M4 12l5 5L20 6" />
	</svg>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.strokeLinejoin("round"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.strokeLinejoin("round"))

Signature

u.strokeLinejoin(value: "miter" | "round" | "bevel")