Spacing and corner radius

Set the base spacing step, density and corner radius. You will see at once how it affects cards, sections and rows of elements, and you can download the values as CSS.

Base step

An 8 px system is the most common. 4 px suits dense interfaces and apps.

Density

Card corner radius 14 px

3xs 4 px
2xs 8 px
xs 12 px
sm 16 px
md 24 px
lg 32 px
xl 48 px
2xl 64 px

SECTION · padding 64 px What we will do for you

Web design Designing and building a website from the first sketch to launch.

Apps Interfaces that are easy to use on a phone too.

Print Flyers, banners and files prepared for the printer.

Enquire Web UX Print

Consultationfree

Website designfrom 2 weeks

Launchwithin 1 day

Inner element

Nested radius rule

Inner radius = outer radius − padding. When both elements have the same radius, the gap in the corners looks uneven and the design feels unrefined.

14 px − 12 px padding = 2 px inside

Export to CSS

:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  --radius-sm: 7px;
  --radius-md: 14px;
  --radius-lg: 21px;
  --radius-full: 999px;
}

Round or square corners?

Corner radius changes the character of a whole design more than you would expect. Sharp corners usually feel solid, precise and formal. Round corners feel softer and friendlier, and the eye glides over them more smoothly. Neither option is right; it depends on what the brand should express.

Button

Sharp 0–2 px

Solid, precise, serious. Feels technical, or luxurious and editorial. Suits: law and finance, architecture, fashion and editorial sites, tables and data, printed matter.

Button

Slightly rounded 4–8 px

Neutral and professional. Takes away some sharpness but adds no playfulness. Suits: corporate sites, admin panels, SaaS apps, e-shops, forms.

Button

Strongly rounded 12–24 px

Friendly, soft and modern. Cards feel like separate “tiles”. Suits: mobile apps, consumer services, landing pages, content cards.

Button

Fully round 999 px

Playful and “touchable”. The element looks like a pill you want to press. Suits: buttons, tags, filters, avatars. Not so much on large cards.

Stick to one style

Mixing sharp and very round elements without a system looks random. Choose 2 or 3 values and use them everywhere.

Bigger element, bigger radius

Sections have a larger radius than cards, cards larger than buttons. The same radius on a small button looks much rounder than on a large card.

Think about print too

A large radius on printed items goes with die-cut shapes. For hang tags and cards, keep in mind that the printer makes the rounding with a die and not every radius is offered.