[ @sdxc/u/color ]

stroke-linecap

Sets stroke-linecap, the SVG paint property controlling how a <path>/<line> shape's stroke renders at the two open ends of an unclosed subpath.

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

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

Quick reference

Every documented call, beside the CSS it emits.

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

Examples

Basic example

Use strokeLinecap to set how the open ends of a line are drawn: butt stops at the end, round and square extend past it:

<svg width={240} height={120} viewBox="0 0 240 120" aria-hidden="true">
	<line
		x1={40}
		y1={24}
		x2={200}
		y2={24}
		mix={[stroke("brand"), strokeWidth(16), strokeLinecap("butt")]}
	/>
	<line
		x1={40}
		y1={60}
		x2={200}
		y2={60}
		mix={[stroke("brand"), strokeWidth(16), strokeLinecap("round")]}
	/>
	<line
		x1={40}
		y1={96}
		x2={200}
		y2={96}
		mix={[stroke("brand"), strokeWidth(16), strokeLinecap("square")]}
	/>
	<path d="M40 8V112M200 8V112" mix={[stroke("danger"), strokeWidth(1)]} />
</svg>

Caps on dashes

A cap applies to every dash of a dashed line, so round gives each dash rounded ends:

<svg width={240} height={64} viewBox="0 0 240 64" aria-hidden="true">
	<line
		x1={16}
		y1={16}
		x2={224}
		y2={16}
		mix={[
			stroke("brand"),
			strokeWidth(8),
			raw({ strokeDasharray: "16 12" }),
			strokeLinecap("butt"),
		]}
	/>
	<line
		x1={16}
		y1={48}
		x2={224}
		y2={48}
		mix={[
			stroke("brand"),
			strokeWidth(8),
			raw({ strokeDasharray: "16 12" }),
			strokeLinecap("round"),
		]}
	/>
</svg>

Applying on a state

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

u.hover(u.strokeLinecap("round"))

Responsive design

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

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

Signature

u.strokeLinecap(value: "butt" | "round" | "square")