Corner Radius

Corner Radius

InfoIn a nutshell
Corner Radius controls how rounded the corners of an element are to provide a visual softness to it. Corner rounding ranges from sharp edges to subtle curves, more pronounced arcs, or a fully circular and oval appearance depending on the content inside.

1. Description

Corner Radius defines the curvature of an element's*link to elements page* four corners. For example, a value of 0px produces sharp, square corners while larger values progressively round them, giving elements a softer, more approachable visual quality. The Rounded option takes this to its maximum, producing a fully circular shape for square elements or an oval for rectangular ones.

  

2. Possible values

The Corner Radius is selected from a dropdown and the available values range from 0 to 24 pixels and a Rounded option.

ValueHow it works
0pxShows perfectly square corners for an element's container that gives it a sharp and structured look.

Ideal for: Dividers, full-bleed images, and grid layouts.
Options ranging from 6px to 24pxIncreases the curvature of the corners from a sharp look to a more fuller display.

Ideal for: The lower values provide a slightly softened look while retaining a predominantly rectangular shape. Common for input fields, tags, and dense UI elements. The higher values provide an intentional rounded shape that is more apt for hero sections and decorative banners.
RoundedProvides maximum rounding and renders as a circle (square elements) or oval (rectangular elements).

Ideal for: Avatar containers, icon badges, profile images, or any element that should appear fully rounded.

3. Visual reference

   

  

4. How to set corner radius?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click and open the Corner Radius accordion within the pane.
  3. Click the dropdown and select the desired preset value from 0px, 6px, 12px, 16px, 24px, or Rounded.
  4. Click Save in the top right corner to ensure the changes are retained.

5. Applicable elements

Corner Radius is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

  1. Text
  2. Image
  3. Icon
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. Menu
  8. Button
  9. Portal Forms
  10. Embed

6. Points to note

  1. Rounded corner radius behaviour - The Rounded option for a square element produces a circle while on a rectangular element it produces an oval. For a complete circle, you can set equal Width and Height in Layout*link to Layout doc* before applying Rounded.
  2. Corner radius clips the border - When both a Border*link to Border doc* and a Corner Radius are set, the border follows the rounded shape and is clipped at the corners accordingly.
  3. Corner radius clips the background image - When both Corner Radius and background*link to Background doc* image are set, the background clipped to the rounded corners.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Background
  7. Border
  8. Shadow
  9. Opacity
  10. Image and icon styling
  11. Tab styling
  12. Stack