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

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

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

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

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

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

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

## Responsive design

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

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

## Signature

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