# Borders, radius & rings

The edge scale — border widths, corner radii, and the focus ring Propel actually draws.

Borders do most of the structural work in Propel. With the shadow scale kept deliberately small, a
1px line is what separates a control from its surroundings.

Three scales cover it: width for the line itself, radius for the corner, and outline and ring for
focus. Outline and ring alias onto the width scale, so an edge, an outline, and a focus ring at the
same step are the same thickness.

## Border width

| Utility | Value | Used by | Used for |
| --- | --- | --- | --- |
| `border-xs` | `0.5px` | — | No component uses this step. |
| `border-sm` | `1px` | `alert-dialog, avatar, avatar-group +19 more` | Every divider, container edge, and control outline in Propel. |
| `border-md` | `1.5px` | — | No component uses this step. |
| `border-lg` | `2px` | `avatar, workspace-avatar` | A deliberate ring around a surface — avatar and workspace rims. |
| `border-xl` | `2.5px` | — | No component uses this step. |

Bare `border` is 1px, from `--default-border-width`, which is the same value as
`border-sm`; the codebase prefers `border-sm` when it wants to be explicit about the scale.
Tailwind's numeric widths (`border-0`, `border-2`, `border-4`, `border-8`) survive the reset but sit
outside the tokens entirely, so prefer the named steps and a width change stays a one-line token
edit.

## Corner radius

Propel leaves Tailwind's radius scale nearly intact, overriding one step and removing one.

| Utility | Value | Source | Used by |
| --- | --- | --- | --- |
| `rounded-none` | `0` | `Static utility` | — |
| `rounded-xs` | `0.125rem / 2px` | `Tailwind default` | internal/link-chrome, text-button |
| `rounded-sm` | `0.25rem / 4px` | `Tailwind default` | alert-dialog, checkbox, combobox +9 more |
| `rounded-md` | `0.375rem / 6px` | `Tailwind default` | breadcrumb, button-group, calendar +19 more |
| `rounded-lg` | `0.5rem / 8px` | `Tailwind default` | alert-dialog, autocomplete, banner +15 more |
| `rounded-xl` | `0.75rem / 12px` | `Tailwind default` | dialog, popover |
| `rounded-2xl` | `1rem / 16px` | `Tailwind default` | — |
| `rounded-3xl` | `1.25rem / 20px` | `Propel (Tailwind: 1.5rem)` | — |
| `rounded-4xl` | — | `Removed by Propel` | — |
| `rounded-full` | `calc(infinity * 1px)` | `Static utility` | avatar, avatar-group, calendar +8 more |

`rounded-4xl` is set to `initial`, so it generates no CSS. Everything else on the scale is Tailwind's own value.

The usage column shows a consistent split worth following. `rounded-md` is the control radius for
buttons, inputs, menu rows, and tabs, and is the most-used radius in the library by a wide margin.
`rounded-lg` is the container radius for dialogs, popups, cards, and tables, `rounded-sm` covers
small things inside a control such as a checkbox box, and `rounded-full` is for shapes
meant to read as round.

A container sits one step rounder than the controls inside it, which is what keeps a button in a
dialog from looking sharper-cornered than the dialog.

## Outline and ring width

Both scales alias the `sm` through `xl` border widths; the `xs` step is available only for borders.
Use `outline-*` for a real CSS outline, which does not affect layout and follows
`outline-offset`, and `ring-*` for Tailwind's box-shadow ring. Bare `outline` and bare `ring` both
resolve to `--default-border-width`, or 1px.

| Utility | Value | Aliases |
| --- | --- | --- |
| `outline-sm` | `1px` | `--border-width-sm` |
| `outline-md` | `1.5px` | `--border-width-md` |
| `outline-lg` | `2px` | `--border-width-lg` |
| `outline-xl` | `2.5px` | `--border-width-xl` |
| `ring-sm` | `1px` | `--border-width-sm` |
| `ring-md` | `1.5px` | `--border-width-md` |
| `ring-lg` | `2px` | `--border-width-lg` |
| `ring-xl` | `2.5px` | `--border-width-xl` |

Propel draws focus with `ring-2`, appearing 46 times across 27 component families, always as `focus-visible:ring-2 focus-visible:ring-accent-strong`. That is Tailwind's numeric utility rather than the named scale above: no component uses `ring-sm`, `ring-md`, `ring-lg`, or `ring-xl`, even though `ring-lg` is the same 2px and would tie the ring to the tokens. Match the surrounding code and use `ring-2` rather than introducing a second spelling.

## Guidelines

Mixing `border-sm` and `border-lg` on one container reads as a mistake rather than a hierarchy. If
an edge needs more presence, change its color to `border-strong` before changing its width.

Radius follows size rather than emphasis. A bigger corner does not mean a more important element, so
pick it from the box's size using the convention above and let color and weight carry emphasis.

Never remove a focus ring without replacing it. `outline-none` and `ring-0` are only safe when
something else makes focus visible, which is why Propel's own controls pair
`focus-visible:outline-none` with a `ring-2`. Dropping the ring while keeping the `outline-none`
leaves the control invisible to keyboard users and fails WCAG 2.4.7.

The scale on this page is geometry only. `border-subtle`, `border-strong`, `border-accent-strong`,
and the rest of the semantic edge colors belong to the color system and are documented with it.