Styling & Design
Borders & corners
Add outlines around elements and round their corners — from subtle card borders to fully rounded pill buttons.
Last updated 2026-06-29
Borders draw a line around an element, and corner rounding softens its edges. Together they're how you make cards, outlined buttons, dividers, and pill shapes. Both live in the Border sector of the Customize tab.
Rounded corners (border radius)
Border radius rounds an element's corners. A small radius (4–8px) gives a gentle, modern softness; a large one turns a box into a pill or a circle.
In the Border sector you can round corners two ways:
- All corners together — drag a single slider (or type a value) to round every corner equally.
- Each corner separately — switch to per-corner mode to set top-left, top-right, bottom-right, and bottom-left independently (useful for shapes like a speech bubble or a tab).
Make a circle: set the radius to a large value (or 50%) on a square element — equal width and height plus a 50% radius gives you a perfect circle, ideal for avatars.
Your Brand Kit has a roundness setting (Sharp / Soft / Rounded / Round) that applies a consistent corner style across your whole site, so you don't have to set it element by element.
Borders (the outline)
A border is a line around the element's box. Three things define it:
| Property | What it controls | Options |
|---|---|---|
| Style | The kind of line | Solid, dashed, dotted, or none |
| Width | How thick the line is | A size like 1px or 2px |
| Color | The line's color | Any color or brand swatch |
To add a simple border, choose a style (solid), a width (1–2px), and a color. Set the style to none to remove it.
Borders on specific sides
You don't have to outline the whole box. Using the side picker, you can put a border on just one side:
- a bottom-only border under a heading acts as an underline accent,
- a left-only border makes a quote or callout stand out,
- a thin top border can separate a footer from the content above it.
Putting it together: an outlined button
- Select your button and set its background to transparent (see Colors & backgrounds).
- In the Border sector, add a solid, 2px border in your brand color.
- Round the corners to taste.
- Match the text color to the border color.
You now have a clean "ghost" button to pair with your solid one.
Where to go next
- Effects & shadows — lift elements off the page with shadows.
- Colors & backgrounds — fills to pair with your borders.