# corner

> The primitive `corner-shape` utility.

```ts
import { corner } from "@sdxc/u/size";
```

The primitive `corner-shape` utility. Composes `u.supports()` so the
declaration only applies behind `@supports`, leaving unsupported
browsers with their normal `border-radius` shape.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.corner("squircle")` | `css({ "@supports (corner-shape: squircle)": { cornerShape: "squircle" } })` |

## Examples

### Basic example

Use `corner("squircle")` with a radius to draw smooth, continuous corners. Browsers without `corner-shape` keep the plain rounded corner:

```tsx
<div mix={[...]}>
	<div mix={[rounded("3rem"), is(36), aspect("square"), ...]}>rounded</div>
	<div mix={[rounded("3rem"), corner("squircle"), is(36), aspect("square"), ...]}>
		squircle
	</div>
</div>
```

### Corner shapes

Pass `"squircle"`, `"bevel"` or `"notch"` to change the shape the radius draws:

```tsx
<div mix={[...]}>
	<div mix={[rounded("2rem"), corner("squircle"), is(32), aspect("square"), ...]}>
		squircle
	</div>
	<div mix={[rounded("2rem"), corner("bevel"), is(32), aspect("square"), ...]}>
		bevel
	</div>
	<div mix={[rounded("2rem"), corner("notch"), is(32), aspect("square"), ...]}>
		notch
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.corner("squircle"))
```

## Responsive design

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

```ts
u.at("md", u.corner("squircle"))
```

## Signature

```ts
u.corner(shape: CornerShape)
```