Border

Border utilities — width (border-{value}), radius (rounded-{value}), and color (border-{color}-{tone}), stackable on any element.

Example

Border Width

Format: border-{value}

Border Radius

Format: rounded-{value}

⚠️ rounded-full is for squares (circles), never for pills. UI Toolkit resolves oversized radii by scaling them into an ellipse, unlike CSS browsers which clamp to a capsule. On a non-square element, 9999px — and 50% / 100%, they fail identically — renders curved sides instead of a pill. On a square all of them produce the same circle, so rounded-full is safe for avatars and icon buttons only.

Pill shapes

Format: rounded-pill-{height}

For a true capsule the radius must equal half the element's height, and USS has no unit for that — so the pill classes are named by the element height they fit:

For a height outside the ladder, author the radius explicitly: border-radius: <height / 2>px.

Border Color

Format: border-{color}-{tone}

The per-ramp border-color classes come from the Essentials theme's Colors/utility-colors.uss (or your own Palette Generator export). The -half suffix means the same tone at 50% opacity — a convention, not shipped by default; see Colors → The -half suffix for the alias to define it yourself.

See also

• Colors — the --color-{name}-{tone} tokens the border-color classes route into
• Theme Stack — where to place overrides so package updates don't eat them
• Size · Layout · Text — the rest of the utility-class set