# border-spacing

> Applies the `border-spacing` property — the gap between adjacent table cell borders when `border-collapse: separate` is in effect (its default).

```ts
import { borderSpacing } from "@sdxc/u/layout";
```

Applies the `border-spacing` property — the gap between adjacent table
cell borders when `border-collapse: separate` is in effect (its default).

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.borderSpacing("0.5rem")` | `css({ borderSpacing: "0.5rem" })` |
| `u.borderSpacing("0.5rem 1rem")` | `css({ borderSpacing: "0.5rem 1rem" })` |

## Examples

### Basic example

Use `borderSpacing(length)` to set the space between the borders of adjacent table cells:

```tsx
<table
	mix={[
		borderSpacing("0.5rem"),
		text("sm"),
		where("th, td", [
			p(2, 4),
			rounded("md"),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]),
	]}
>
	<thead>
		<tr>
			<th>Package</th>
			<th>Subpath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>@sdxc/u</td>
			<td>layout</td>
		</tr>
		<tr>
			<td>@sdxc/u</td>
			<td>color</td>
		</tr>
	</tbody>
</table>
```

### Spacing each axis

Pass two lengths, like `borderSpacing("1.5rem 0.25rem")`, to space columns apart by the first and rows by the second:

```tsx
<table
	mix={[
		borderSpacing("1.5rem 0.25rem"),
		text("sm"),
		where("th, td", [
			p(2, 4),
			rounded("md"),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]),
	]}
>
	<thead>
		<tr>
			<th>Package</th>
			<th>Subpath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>@sdxc/u</td>
			<td>layout</td>
		</tr>
		<tr>
			<td>@sdxc/u</td>
			<td>color</td>
		</tr>
	</tbody>
</table>
```

## Applying on a state

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

```ts
u.hover(u.borderSpacing("0.5rem"))
```

## Responsive design

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

```ts
u.at("md", u.borderSpacing("0.5rem"))
```

## Signature

```ts
u.borderSpacing(value: string)
```