Border-radius and border-size tokens. Both scales are Open Props primitives, vendored at
/open-props/props.borders.css and imported by /ui/ui.css. This library
assigns corner radii according to the element's role. Borders generally use a consistent width, with color providing emphasis.
--radius-*
Range: --radius-1..--radius-6 — 2px, 5px,
1rem, 2rem, 4rem, 8rem — plus
--radius-round (1e5px, which resolves to a full pill at any size) and
--radius-conditional-1..6.
Radius is assigned by role, not by size. Controls take --radius-2:
input, textarea, select, .input-group,
.btn, the anchored panel that drops from a trigger, and the
segmented radio row. Cards and article-sized
containers take --radius-3. Pills and knobs take --radius-round:
.badge, the switch track and thumb, the floating
side-panel handle. Wide controls use the same radius as other controls, including segmented groups. To give a segmented group a pill shape, set
--segmented-radius explicitly.
--radius-1 provides a slight curve for inline markers and tinted strips, such as notification rows and page-break chips. --radius-4 through --radius-6 are available in Open Props but are not currently used.
--radius-conditional-* drops the corner when the element goes
edge-to-edge. Each one is
clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-N)), and the percentage in a
border-radius resolves against the element's own border box: an element as wide as
the viewport computes exactly 0px, anything narrower is multiplied past the ceiling
and gets the whole radius. There is no in-between and no breakpoint involved — it is the
element's own width that decides, so "no radius on small screens" is the consequence for a
container that becomes full-bleed as the viewport narrows, not the rule. No component in this
library uses it; it is there for a hero or banner that spans the page.
--border-size-*
Range: --border-size-1..--border-size-5 — 1px,
2px, 5px, 10px, 25px.
Fields, .input-group, .btn.outline, cards, and anchored panels share var(--border-size-1) solid var(--border-color). Use --border-strong for hover, focus-adjacent boundaries, and small outlined badges. If boundaries are too faint, adjust these shared color tokens on Color rather than thickening or darkening one component's border.
Only a few elements use widths above 1px. --border-size-2 is the focus
ring's width and its offset
(outline: var(--border-size-2) solid var(--brand)), and the selected
ui-tab's underline. --border-size-3 appears once, as the loading
spinner's ring. --border-size-4 and --border-size-5 are available but unused in the library.