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, preview the iOS continuous curve, and export to CSS, SwiftUI, Compose or Flutter.

Shape corners freeFree to export code for 6 platformsNo sign-upNo watermarkRuns in your browser

Presets

Link all cornersRadius

16px

Nested padding

8px

Shows the inner radius a nested element should use.Preview as iOS continuous corner

inner 8px

Outer: 16px
Padding: 8px
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.

iOS draws continuous corners (a squircle), not the circular arc CSS uses — which is why a 16px web card never quite matches a 16px iOS card. The SwiftUI export below uses style: .continuous; on the web the nearest equivalent is a clip-path superellipse like the preview.

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 — Stack multiple shadows with a live preview, then export as CSS, Tailwind, SwiftUI, Compose elevation or Flutter.
Flexbox Generator — Build a flex layout visually, then export it as CSS, Tailwind, SwiftUI, Compose, React Native or Flutter.
Blob Generator — Generate organic blob shapes as SVG, PNG, CSS border-radius or a native SwiftUI and Compose path.

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.