# squircle

> A shape pattern for continuous rounded corners: sets a radius, then refines it with `corner-shape` where supported, so every browser renders at least the plain rounded shape.

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

A shape pattern for continuous rounded corners: sets a radius, then
refines it with `corner-shape` where supported, so every browser renders
at least the plain rounded shape. Composes `u.rounded()` and `u.corner()`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.squircle("lg")` | `css({ borderRadius: "var(--ui-radius-lg, 0.5rem)", "@supports (corner-shape: squircle)": { cornerShape: "squircle" } })` |

## Examples

### Basic example

Use `squircle()` to round an element's corners with a smooth, continuous curve. Browsers without `corner-shape` draw the plain rounded corner:

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

### Radius

Pass a step of the radius scale, like `squircle("lg")`, or any CSS length; with no argument it uses `"md"`:

```tsx
<div mix={[...]}>
	<div mix={[squircle(), is(20), aspect("square"), ...]}>md</div>
	<div mix={[squircle("lg"), is(20), aspect("square"), ...]}>lg</div>
	<div mix={[squircle("xl"), is(20), aspect("square"), ...]}>xl</div>
	<div mix={[squircle("2rem"), is(20), aspect("square"), ...]}>2rem</div>
</div>
```

## Applying on a state

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

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

## Responsive design

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

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

## Customizing your theme

### Customizing radii

Redefine a `--ui-radius-*` variable to change a step, or declare a new one:

```css
:root {
	--ui-radius-2xl: 1rem;
}
```

```ts
declare module "@sdxc/u" {
	interface Radii {
		"2xl": true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
squircle("2xl")
```

## Signature

```ts
u.squircle(name?: RadiusName | (string & {}))
```