# border-radius

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

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

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

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

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

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

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

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

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

## Responsive design

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

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

```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
rounded("2xl")
```

## Signature

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