[ @sdxc/u/size ]

corner

The primitive corner-shape utility.

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

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

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:

rounded

squircle

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

squircle

bevel

notch

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

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

Responsive design

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

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

Signature

u.corner(shape: CornerShape)