Shape and corner radius
The Corners section of the Finder Builder controls how rounded the edges of every widget element are — buttons, search inputs, filter dropdowns, the map tile, location cards, and tags. One-click presets let you establish a global roundness feel; a per-element editor lets you diverge from the preset for specific elements.
For the full design overview, see Customization overview.
Where to find it
In the Finder Builder, open the Design section in the left sidebar and scroll to the Corners subsection (or use the in-page anchor from the Design section’s subsection navigation).
🟡 [SCREENSHOT: The Corners subsection showing the six preset icons in a row with “Default” highlighted, and the “Customize per element” disclosure toggle below in its closed state.]
Roundness presets
Six presets are available. Click any icon to apply that preset globally:
| Preset | Button | Input | Filter dropdown | Map | Tag | Location card |
|---|---|---|---|---|---|---|
| Square | 0 px | 0 px | 0 px | 0 px | 0 px | 0 px |
| Soft | 2 px | 2 px | 2 px | 2 px | 4 px | 0 px |
| Default | 4 px | 4 px | 4 px | 4 px | 4 px | 0 px |
| Rounded | 8 px | 6 px | 8 px | 8 px | 12 px | 0 px |
| Soft pill | 12 px | 8 px | 12 px | 12 px | 24 px | 0 px |
| Pill | 999 px | 8 px | 999 px | 12 px | 999 px | 0 px |
Reading the table:
- The location card is always 0 px across all presets — it renders as a flush rectangle by design. This is unchanged by the preset row.
- 999 px is the convention for a fully pill-shaped element. Because most buttons and inputs are shorter than their width, a high border-radius like 999 px resolves to a perfect half-circle on each end. It is stored as-is and renders as fully rounded.
- In the Pill preset, the Input and Filter dropdown intentionally stay at 8 px and 999 px respectively — the search bar keeps a moderate rounding to avoid an awkward nested-pill effect (a pill inside a pill).
🟡 [SCREENSHOT: Six side-by-side finder screenshots, one per preset, showing the same finder under Square, Soft, Default, Rounded, Soft pill, and Pill settings.]
Per-element customization
To diverge from any preset on a specific element, open the Customize per element disclosure below the preset row.
The per-element table shows a numeric input for each element:
| Element | Default (Default preset) | Max |
|---|---|---|
| Button | 4 px | 24 px |
| Input | 4 px | 24 px |
| Filter dropdown | 4 px | 24 px |
| Map | 4 px | 24 px |
| Tag | 4 px | 50 px |
| Location card | 0 px | 24 px |
Tags have a higher maximum (50 px) because they are typically short-wide chips where a full pill rounding requires a larger value. For all other elements, the slider caps at 24 px.
💡 Tip: To make only the tags pill-shaped while keeping everything else squared, set the Tag radius to 50 px (or close to it) and leave other elements on the Square or Soft preset.
🟡 [SCREENSHOT: The “Customize per element” disclosure open, showing the element table with icons, labels, and numeric inputs. The Tag row shows “50” typed in.]
The “Custom” state
When the current per-element values don’t exactly match any of the six presets, no preset button appears highlighted. This is the Custom state — your values are preserved, but the preset row gives you no visual confirmation of which preset you started from.
To return to a preset, simply click it. Clicking a preset overwrites all element values with the preset’s values.
How the values persist
Corner radius values are stored as pixel strings per element in the finder configuration (borderRadius: { button: "4px", input: "4px", ... } — example shows the Default preset). They’re included in the published CDN payload and applied as CSS custom properties on the widget at runtime.
Where to next
- Typography — fonts and base size
- Themes — color presets
- Customization overview — all design controls