Border Radius

How rounded the corners of the column are.

Where to find it
Labelled Border Radius in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
borderRadius

In plain English

Border Radius rounds off the sharp corners of a box. The number is how far the curve reaches: a small value like 4px gives a gently softened edge, 16px is a distinctly rounded card, and a very large value turns a square into a circle.

It applies whether or not the column has a border. The rounding affects the background colour and any image the column is clipping, not just the outline.

A useful trick: set the radius to 50% on a square column and you get a perfect circle, which is the standard way to make a round profile photo.

When you would use it

  • Cards and buttons should feel softer and more modern.
  • You want a circular avatar or icon badge: use a square column and a 50% radius.
  • A hard-edged image looks out of place next to rounded elements around it.

How to change it

  1. Select the column, open "Selected Column", then "Border Radius".
  2. Enter a number and choose a unit. 4px to 12px covers most card and button designs.
  3. Use a percentage when you want the curve to scale with the size of the box.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • For the rounding to visibly clip an image inside the column, the column usually also needs Overflow set to "hidden".
  • A radius larger than half the box's width or height is capped by the browser, so very large numbers all look the same.
  • Keep the radius consistent across a page. Mixed radii are one of the fastest ways to make a design look unplanned.

Related settings

For developers

The technical reference for what this setting produces: MDN: border-radius. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next