[ @sdxc/u/effects ]

border-radius

Applies a corner radius from the radius scale or a raw CSS length.

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

import { rounded } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.rounded("lg")`	`css({ borderRadius: "var(--ui-radius-lg, 0.5rem)" })`
`u.rounded("inherit")`	`css({ borderRadius: "inherit" })`

Examples

Basic example

Use rounded("sm"), rounded("md"), rounded("lg") or rounded("xl") to round an element's corners by a step of the radius scale:

rounded("sm")

rounded("md")

rounded("lg")

rounded("xl")

<div mix={[...]}>
	<div mix={[rounded("sm"), ...]}>rounded("sm")</div>
	<div mix={[rounded("md"), ...]}>rounded("md")</div>
	<div mix={[rounded("lg"), ...]}>rounded("lg")</div>
	<div mix={[rounded("xl"), ...]}>rounded("xl")</div>
</div>

Square and pill shapes

Use rounded("none") for square corners and rounded("full") for pills and circles:

rounded("none")

rounded("full")

<div mix={[...]}>
	<div mix={[rounded("none"), ...]}>rounded("none")</div>
	<div mix={[rounded("full"), ...]}>rounded("full")</div>
</div>

Using a custom value

Pass any CSS length, like rounded("6px") or rounded("2rem"), when no step of the scale fits:

rounded("6px")

rounded("2rem")

<div mix={[...]}>
	<div mix={[rounded("6px"), ...]}>rounded("6px")</div>
	<div mix={[rounded("2rem"), ...]}>rounded("2rem")</div>
</div>

Inheriting the parent's radius

Use rounded("inherit") to give an element the same radius as its parent:

rounded("inherit")

<div mix={[rounded("xl"), p(2), bg("brand.tint")]}>
	<div mix={[rounded("inherit"), ...]}>rounded("inherit")</div>
</div>

Applying on a state

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

u.hover(u.rounded("lg"))

Responsive design

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

u.at("md", u.rounded("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:

rounded("2xl")

Signature

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