Overview
The Border tab of the theme editor controls how rounded your app's corners are. To open it, go to Settings → Design System → Theme Builder in the app builder and select the Border tab. It is a single global preset, not a per-block setting: pick the shape language once and the whole app follows it. Buttons, inputs, cards, modals, tags — all their corners resolve to the values your preset defines.
The Four Presets
Presets are shown in order from squarest to roundest.
| Preset | Description |
Fully Square | No rounding — sharp, square corners on all elements. Every radius token collapses to 0. |
Soft Square | Slightly rounded corners for a subtle touch. Most steps stay at a subtle 4px. |
Rounded | Moderately rounded corners for a balanced, contemporary appearance. Radii spread from 2px up to 12px. |
Fully Rounded | Fully rounded corners for a smooth, pill-like shape. Small elements turn pill-shaped. Also widens buttons slightly (see Gotchas). |
Selecting a preset applies immediately to the theme preview. Click Save in the Theme Builder to make the change permanent, or Cancel to discard it.
How It Works
Behind each preset sits a full ladder of corner-radius sizes, from "none" up to the largest card rounding, plus a "full" pill value. Blocks don't hardcode their rounding — a small chip asks for a small radius step, a card asks for a large one — and the preset decides what each step is worth.
Fully Square — collapses every step to zero
Soft Square — keeps most steps at a subtle value
Rounded — spreads them from small to medium
Fully Rounded — pushes them large enough that small elements turn pill-shaped
One selection restyles all corners consistently, each element at a size appropriate to it.
Radius Token Reference
All values are in rem. --radius-full is 9999rem in every preset — a value large enough to make any corner fully round, giving a pill shape.
| Token | Fully Square | Soft Square | Rounded | Fully Rounded |
--radius-none | 0 | 0 | 0 | 0 |
--radius-xxs | 0 | 0.125 | 0.125 | 0.375 |
--radius-xs | 0 | 0.25 | 0.25 | 0.75 |
--radius-sm | 0 | 0.25 | 0.375 | 0.75 |
--radius-md | 0 | 0.25 | 0.5 | 0.75 |
--radius-lg | 0 | 0.25 | 0.5 | 0.75 |
--radius-xl | 0 | 0.25 | 0.5 | 0.75 |
--radius-2xl | 0 | 0.25 | 0.5 | 1.25 |
--radius-3xl | 0 | 0.625 | 0.625 | 1.25 |
--radius-4xl | 0 | 0.75 | 0.75 | 1.25 |
--radius-full | 9999 | 9999 | 9999 | 9999 |
Component-Specific Radius Tokens
The preset also writes component-specific tokens, some only under Fully Rounded:
| Token | Applied Under | Notes |
--button-radius | All four presets | One value per button size (xs, sm, md, lg) |
--button-padding-x | Fully Rounded only | Widens xs and sm buttons so the pill doesn't pinch labels |
--input-radius | All four presets | One value per input size (sm, md) |
--input-padding-x | Fully Rounded only | Applied to both input sizes |
--checkbox-radius | Fully Rounded only | Keeps checkboxes from turning into circles |
--ua-listitem-padding-x | Fully Rounded only | One value per list-item size (sm, md) |
--tooltip-radius | Fully Rounded only | Holds tooltips back to the Rounded value |
--variable-data-pill-radius | All four presets | — |
--chart-bar-radius | All four presets | Rounds the ends of chart bars |
Overriding Radius for a Single Element
There is no per-preset fine-tuning in the Border tab. Radius tokens are theme-wide, so overriding one changes every element that uses that step, in every app on the theme.
To change one step of the scale everywhere: open the Tokens & CSS tab of the theme editor and override the specific
--radius-*token in your scoped CSS block.To round a single element differently: use that block's own Appearance corner radius setting. It overrides the theme preset for that block instance only.
Trade-offs & Gotchas
It's one global choice. The border preset is stored as a single value on the theme. There is no way to give one page square corners and another page rounded corners from this tab alone.
Fully Rounded also widens buttons. The preset doesn't only change radii — Fully Rounded additionally increases the horizontal padding of buttons so the pill shape doesn't pinch their labels. Expect buttons to be slightly wider under Fully Rounded than under the other three presets.
Overriding a token changes that step everywhere. A
--radius-*override in Tokens & CSS applies to every element that uses that step, across every app on the theme. For a one-off exception on a single element, use the block's Appearance corner radius instead.
Related Pages
Theme Builder — how the border preset fits into the whole theme
Tokens & Custom CSS — overriding individual radius tokens
Colors & Color Scheme — the color system