# outline-style

> Sets `outline-style` alone, so a state can override the style while the color and width already in effect stay in force.

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

Sets `outline-style` alone, so a state can override the style while the
color and width already in effect stay in force.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.outlineStyle("dashed")` | `css({ outlineStyle: "dashed" })` |

## Examples

### Basic example

Use `outlineStyle` to set only the style of an outline, like `dashed` or `dotted`:

```tsx
<div mix={[...]}>
	<div mix={[outlineWidth(3), outlineColor("brand"), outlineStyle("solid"), ...]}>
		solid
	</div>
	<div mix={[outlineWidth(3), outlineColor("brand"), outlineStyle("dashed"), ...]}>
		dashed
	</div>
	<div mix={[outlineWidth(3), outlineColor("brand"), outlineStyle("dotted"), ...]}>
		dotted
	</div>
	<div mix={[outlineWidth(4), outlineColor("brand"), outlineStyle("double"), ...]}>
		double
	</div>
</div>
```

### Applying on a state

Wrap `outlineStyle` in a state, like `focusVisible()`, to draw the outline only then. Tab to the button to see it:

```tsx
<button
	type="button"
	mix={[
		outlineWidth(2),
		outlineColor("brand"),
		focusVisible(outlineStyle("dashed")),
		...,
	]}
>
	Save changes
</button>
```

## Applying on a state

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

```ts
u.hover(u.outlineStyle("dashed"))
```

## Responsive design

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

```ts
u.at("md", u.outlineStyle("dashed"))
```

## Signature

```ts
u.outlineStyle(value: OutlineStyleValue)
```