Borders, radius & rings

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

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.

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 or a badge, 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 straight onto the border widths, so they are the same four values under different property names. 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.

Propel draws focus with ring-2, appearing 32 times across 21 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.