Adjusting Shapes & Layout
A single border radius slider controls the corner rounding of every button, card, input, and image on your pages.
What Border Radius Controls
When you adjust the slider, all of these elements update together:
- Buttons -- Primary, secondary, and outline buttons, including CTAs, add-to-cart, and form submit buttons.
- Cards -- Product cards, appointment cards, and content containers.
- Form Inputs -- Text fields, dropdowns, textareas, and select menus.
- Avatars -- Profile images and avatar containers. At very high values, square avatars approach a circle.
- Dropdowns and Popovers -- Dropdown menus, tooltips, and floating panels.
- Images and Media -- Image containers and media blocks get consistent corner treatment.
- Badges and Tags -- Status badges, category tags, and labels.
Annotated page showing border radius applied to buttons, cards, inputs, avatars, and dropdowns
The Border Radius Slider
- Open the Theme tab in your page editor.
- Scroll to the Shapes section.
- Drag the Border Radius slider between 0px (sharp corners) and 32px (heavily rounded).
- The live preview updates in real time as you drag.
- Click Save when you've found the right value.
The border radius slider in the theme editor shapes section
Comparison of Different Values
Each range creates a distinct visual personality:
0px -- Sharp and Angular
Completely square corners. Creates a bold, structured, editorial feel that conveys precision and seriousness. Works well for news sites, corporate brands, and print-inspired designs.
Example page with 0px border radius showing sharp corners on all elements
4-8px -- Subtle and Professional
Slightly softened corners that remove the harshness of sharp edges without looking rounded. The most common range for professional websites and SaaS apps -- polished and modern.
Example page with 6px border radius showing subtly softened corners
12-16px -- Friendly and Approachable
Noticeably rounded corners that give your page a welcoming, contemporary feel. Popular with consumer brands, creative portfolios, and lifestyle businesses.
Example page with 14px border radius showing friendly rounded corners
24-32px -- Playful and Bold
Heavily rounded corners that create pill-shaped buttons and very soft card edges. Works well for creative brands, children's products, and designs that want to feel fun and casual. At 32px, smaller elements like buttons become fully pill-shaped.
Example page with 28px border radius showing playful pill-shaped elements
Pro Tip: Not sure where to start? Try 12px -- it's a versatile middle ground that works for most brands. Adjust from there.
Choosing the Right Value for Your Brand
- Match your brand personality. A law firm might use 0--4px for a serious feel; a yoga instructor might use 16--24px for warmth.
- Consider your content type. Structured data (pricing tables, grids) benefits from lower values. Lifestyle imagery and storytelling can embrace higher values.
- Stay consistent. The global setting ensures consistency -- that unified look is more professional than a mix of shapes.
- Preview with real content. The ideal radius depends on your specific colors, fonts, and images. Always check the live preview.
Pro Tip: Border radius interacts with your color choices. Rounded cards with soft pastels feel completely different from rounded cards with bold, saturated colors. If you change your colors significantly, revisit your radius to make sure the combo still feels right.