What border radius should I use for mobile app cards?

Between 12px and 20px suits most current mobile interfaces. Smaller reads as dense and utilitarian, larger as friendly and spacious. Whatever you choose, apply it consistently — mixed radii across a screen is one of the most visible signs of an unsystematic design.

What radius should a nested element use?

The outer radius minus the padding between them. A 16px card with 8px padding wants an 8px inner radius. Matching them makes the inner corner appear to bulge outward.

How do I make an iOS-style squircle in CSS?

You cannot do it exactly — border-radius draws a circular arc while iOS uses a continuous curve. Slightly increasing the radius gets visually closer, or you can clip with an SVG path for an exact match.

floow.design

Border Radius Generator

Shape each corner independently, including nested radii, and copy the CSS.

Shape corners freeSign up to copy the CSSNo usage limits

Link all cornersRadius

16px

Nested padding

8px

Shows the inner radius a nested element should use.

inner 8px

A nested element should use the outer radius minus the padding — 16 − 8 = 8px here. Matching them makes the inner corner look like it bulges.

border-radius: 16px;

Drag each corner independently or link them all, and copy the resulting CSS. The preview also shows the correct radius for a nested element inside.

Corner radius is one of the quietest carriers of brand personality in an interface — sharp corners read as serious and dense, generous ones as friendly and spacious.

What border-radius actually draws

CSS border-radius draws a quarter-ellipse at each corner. Give it one value and all four corners match; give it four and they are applied clockwise from the top left. It clips the element's background, border and any overflow, which is why a rounded card needs overflow hidden before an image inside it will respect the corners.

Nested corners need different radii

A rounded element inside another rounded element looks wrong when both use the same value — the inner corner appears to bulge. The inner radius should be the outer radius minus the padding between them. Getting this right is a small detail that makes card layouts look properly considered.

iOS corners are not circular

Apple uses a continuous curve — a squircle — where the curvature ramps up gradually instead of starting abruptly. CSS border-radius produces a circular arc, which is why a plain rounded rectangle never quite matches a native iOS card. Slightly larger radii get you closer to the feel.

How to use the border radius generator

Keep corners linked for the common case — most mobile cards use a single uniform radius.
Unlink them when you need an asymmetric shape, such as a sheet that is rounded only at the top.
Set the nested padding to see the inner radius a child element should use.
Remember to add overflow: hidden if an image inside needs to respect the corners.
Copy the CSS, which collapses to a single value when all four corners match.

Use it with

Box Shadow Generator — Dial in offset, blur, spread and colour with a live preview, and stack multiple shadows.
Flexbox Generator — Build a flex layout visually and copy the CSS, with a live preview that shows what each property does.
Blob Generator — Generate organic blob shapes as SVG, for backgrounds, masks and decorative fills.

Frequently asked questions

What border radius should I use for mobile app cards?: Between 12px and 20px suits most current mobile interfaces. Smaller reads as dense and utilitarian, larger as friendly and spacious. Whatever you choose, apply it consistently — mixed radii across a screen is one of the most visible signs of an unsystematic design.
What radius should a nested element use?: The outer radius minus the padding between them. A 16px card with 8px padding wants an 8px inner radius. Matching them makes the inner corner appear to bulge outward.
How do I make an iOS-style squircle in CSS?: You cannot do it exactly — border-radius draws a circular arc while iOS uses a continuous curve. Slightly increasing the radius gets visually closer, or you can clip with an SVG path for an exact match.