# 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.

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

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.

## 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:

```tsx
<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:

```tsx
<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.

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

## Responsive design

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

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

## Signature

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