[ @sdxc/u/size ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

rounded

squircle

<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":

2rem

<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.

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

Responsive design

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

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:

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

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

The new name is then accepted wherever the scale is:

squircle("2xl")

Signature

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