Overview

The Border tab of the theme editor controls how rounded your app's corners are. 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.

Note: If you need a specific radius value changed for one element without abandoning the preset everywhere, override the corresponding --radius-* token directly via Tokens & Custom CSS.

The Four Presets

Presets are shown in order from squarest to roundest.

Selecting a preset applies immediately to the theme preview. Save the theme to make the change permanent.

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.

Component-Specific Radius Tokens

The preset also writes component-specific tokens, some only under Fully Rounded:

Overriding Radius for a Single Element

There is no per-preset fine-tuning in the Border tab. To deviate from the preset for one specific element:

1. Open the Tokens & CSS tab of the theme editor.

2. Override the specific --radius-* token in your scoped CSS block.

A block's own Appearance settings can also round or square individual elements, overriding the theme preset for that specific block instance.

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 deviates one element without abandoning the preset. Override --radius-* tokens directly in Tokens & CSS when you need one exception without switching the global preset.

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