# borderEdge

> Applies a border to a single edge only, for a divider between two adjacent elements (e.g.

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

Applies a border to a single edge only, for a divider between two adjacent
elements (e.g. two stepper buttons sharing one frame). Only the given keys
are set; prefer a logical edge so the divider follows writing mode.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.borderEdge("inline-start", { width: 1, style: "solid" })` | `css({ borderInlineStartWidth: "1px", borderInlineStartStyle: "solid" })` |
| `u.borderEdge("block-end", { color: "brand", width: 2 })` | `css({ borderBlockEndColor: "var(--ui-brand-border)", borderBlockEndWidth: "2px", borderBlockEndStyle: "solid" })` |
| `u.borderEdge("inline-start", { width: 2, noStyleDefault: true })` | `css({ borderInlineStartWidth: "2px" })` |
| `u.borderEdge("right", { width: 1, style: "solid", color: "neutral" })` | `css({ borderRightWidth: "1px", borderRightStyle: "solid", borderRightColor: "var(--ui-neutral-border)" })` |

## Examples

### Basic example

Use `borderEdge` with an edge and an object to draw a border on one side of an element only:

```tsx
<h3 mix={[borderEdge("block-end", { color: "brand.strong", width: 2 }), pbe(2), ...]}>
	Release notes
</h3>
```

### Logical edges

Name a logical edge, `block-start`, `inline-end`, `block-end` or `inline-start`, so the border follows the writing mode:

```tsx
<div mix={[...]}>
	<div mix={[borderEdge("block-start", { color: "brand.strong", width: 4 }), ...]}>
		block-start
	</div>
	<div mix={[borderEdge("inline-end", { color: "brand.strong", width: 4 }), ...]}>
		inline-end
	</div>
	<div mix={[borderEdge("block-end", { color: "brand.strong", width: 4 }), ...]}>
		block-end
	</div>
	<div mix={[borderEdge("inline-start", { color: "brand.strong", width: 4 }), ...]}>
		inline-start
	</div>
</div>
```

### Dividers between items

Draw a border on the edges an item shares with its neighbours to divide items that sit in one frame:

```tsx
<div
	mix={[
		inlineFlex(),
		border({ color: "neutral.strong", width: 1 }),
		rounded("md"),
		overflow("hidden"),
	]}
>
	<button type="button" mix={[border("none"), ...]}>
		−
	</button>
	<span
		mix={[
			borderEdge("inline-start", { color: "neutral.strong", width: 1 }),
			borderEdge("inline-end", { color: "neutral.strong", width: 1 }),
			...,
		]}
	>
		12
	</span>
	<button type="button" mix={[border("none"), ...]}>
		+
	</button>
</div>
```

### Physical edges

Name `left`, `right`, `top` or `bottom` to pin the border to that side whatever the writing direction; here the block is right-to-left:

```tsx
<div dir="rtl" mix={[...]}>
	<p mix={[borderEdge("left", { color: "brand.strong", width: 4 }), pis(3), ...]}>
		left
	</p>
	<p
		mix={[
			borderEdge("inline-start", { color: "brand.strong", width: 4 }),
			pis(3),
			...,
		]}
	>
		inline-start
	</p>
</div>
```

## Applying on a state

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

```ts
u.hover(u.borderEdge("inline-start", { width: 1, style: "solid" }))
```

## Responsive design

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

```ts
u.at("md", u.borderEdge("inline-start", { width: 1, style: "solid" }))
```

## Customizing your theme

### Customizing colors

Define a palette as `--ui-color-{name}-{50..950}` and map a tone onto it with the `--ui-{tone}-*` variables, the way `theme.css` maps the built-in ones:

```css
:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}
```

```ts
declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
bg("info")
```

## Signature

```ts
u.borderEdge(edge: BorderEdge, options?: BorderEdgeOptions)
```