---
title: Radius
description: Corners grow with the size of the surface.
---

```tsx
const RADII = [
  {
    name: "rounded-xs",
    value: "5px",
    className: "h-16 bg-control rounded-xs",
    usage: "Badges, kbd, xs controls.",
  },
  {
    name: "rounded-sm",
    value: "6px",
    className: "h-16 bg-control rounded-sm",
    usage: "Rows, nav items, sm and md controls, menu items.",
  },
  {
    name: "rounded-md",
    value: "8px",
    className: "h-16 bg-control rounded-md",
    usage: "lg controls, inputs, tooltips, row panels.",
  },
  {
    name: "rounded-lg",
    value: "10px",
    className: "h-16 bg-control rounded-lg",
    usage: "Menus and popovers, stat tiles.",
  },
  { name: "rounded-xl", value: "12px", className: "h-16 bg-control rounded-xl", usage: "Panels." },
  {
    name: "rounded-full",
    value: "9999px",
    className: "h-16 bg-control rounded-full",
    usage: "Pills, action bar, avatars, dots.",
  },
];

export default function Radius() {
  return (
    <div className="grid grid-cols-3 gap-4 bg-default font-sans text-body-md text-default">
      {RADII.map((radius) => (
        <div className="flex flex-col gap-2" key={radius.name}>
          <div className={radius.className} />
          <div className="flex items-baseline justify-between">
            <code className="font-medium">{radius.name}</code>
            <span className="text-body-md text-muted tabular-nums">{radius.value}</span>
          </div>
          <span className="text-body-md text-muted">{radius.usage}</span>
        </div>
      ))}
    </div>
  );
}
```

A nested surface uses a smaller radius than its container, never the same one.

Marks too small for the scale keep a fixed radius below `rounded-xs`: 4px for checkboxes and the xs square avatar, 3px for waterfall bars, 2px for meter swatches and waterfall error markers.