The Border radius screen controls the global corner radius applied across the storefront theme. Open Border radius from the menu in Theme Manager to reach the screen titled Edit border radius.
Fields and controls
Control | What it does |
Border radius | A slider holds the radius value, which is shown in pixels. The value sets the corner radius in pixels. |
--shape-borderRadius | A code element on the screen shows this token name. The token name is provided for reference in custom CSS. |
Copy to clipboard | Copies the token name to your clipboard. |
Reset | Restores the token to its saved value. |
Cancel | Discards unsaved changes and returns to the saved state. |
Save | Save is unavailable on the unchanged screen. Saving depends on you first changing the value. Saves the current value. |
Sync | Pushes the current theme build to the storefront. |
Notes
The screen exposes a single design token, so the radius applies to every component that uses rounded corners, such as cards.
The screen shows sample components, including Buttons, a Text field with an Email input, Chips and product cards. The live preview shows how the radius applies to those components before you save.
Related