Border Radius Generator

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

1. Keep corners linked for the common case — most mobile cards use a single uniform radius.
2. Unlink them when you need an asymmetric shape, such as a sheet that is rounded only at the top.
3. Set the nested padding to see the inner radius a child element should use.
4. Remember to add overflow: hidden if an image inside needs to respect the corners.
5. 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.