DESIGN SYSTEMS & CODE

Concentric Border-Radius & Squircle Generator

Two related corner problems, solved with real math: nested radii that don't pinch at the edges, and iOS-style continuous-curvature squircle corners — both exported as ready-to-use CSS.

Nested Radius Formula (outer − padding)Synchronized xs–2xl Radius ScaleSuperellipse Squircle Mathclip-path & SVG Export
Design SystemsNeed a full corner-radius system built for your product?Talk to design team
Part 1

Nested (Concentric) Radius Calculator

inner = outer − padding

8px = 20px − 12px

Need a Full Radius System? →

Same Radius vs. Concentric Radius

✕ Same radius (20px) — pinches at the corners

✓ Concentric radius (8px) — curves run parallel

Radius Scale (xs–2xl)

XS
SM
MD
LG
XL
2XL
:root {
  --radius-outer-xs: 8px;
  --radius-outer-sm: 13px;
  --radius-outer-md: 20px;
  --radius-outer-lg: 32px;
  --radius-outer-xl: 44px;
  --radius-outer-2xl: 60px;

  --radius-inner-xs: 0px;
  --radius-inner-sm: 1px;
  --radius-inner-md: 8px;
  --radius-inner-lg: 20px;
  --radius-inner-xl: 32px;
  --radius-inner-2xl: 48px;
}
Part 2

Superellipse Squircle Generator

Shape preset

120px × 120px

Need Custom App Icon Shapes? →

Circular Corner vs. Squircle

Standard border-radius (n=2)

Squircle (n=5.6)

.squircle {
  width: 120px;
  height: 120px;
  clip-path: path("M 0 28 L 0.02 17.99 L 0.06 15.19 L 0.14 13.21 L 0.25 11.63 L 0.4 10.3 L 0.57 9.15 L 0.78 8.13 L 1.02 7.22 L 1.3 6.4 L 1.62 5.65 L 1.97 4.97 L 2.36 4.35 L 2.79 3.78 L 3.26 3.26 L 3.78 2.79 L 4.35 2.36 L 4.97 1.97 L 5.65 1.62 L 6.4 1.3 L 7.22 1.02 L 8.13 0.78 L 9.15 0.57 L 10.3 0.4 L 11.63 0.25 L 13.21 0.14 L 15.19 0.06 L 17.99 0.02 L 28 0 L 92 0 L 102.01 0.02 L 104.81 0.06 L 106.79 0.14 L 108.37 0.25 L 109.7 0.4 L 110.85 0.57 L 111.87 0.78 L 112.78 1.02 L 113.6 1.3 L 114.35 1.62 L 115.03 1.97 L 115.65 2.36 L 116.22 2.79 L 116.74 3.26 L 117.21 3.78 L 117.64 4.35 L 118.03 4.97 L 118.38 5.65 L 118.7 6.4 L 118.98 7.22 L 119.22 8.13 L 119.43 9.15 L 119.6 10.3 L 119.75 11.63 L 119.86 13.21 L 119.94 15.19 L 119.98 17.99 L 120 28 L 120 92 L 119.98 102.01 L 119.94 104.81 L 119.86 106.79 L 119.75 108.37 L 119.6 109.7 L 119.43 110.85 L 119.22 111.87 L 118.98 112.78 L 118.7 113.6 L 118.38 114.35 L 118.03 115.03 L 117.64 115.65 L 117.21 116.22 L 116.74 116.74 L 116.22 117.21 L 115.65 117.64 L 115.03 118.03 L 114.35 118.38 L 113.6 118.7 L 112.78 118.98 L 111.87 119.22 L 110.85 119.43 L 109.7 119.6 L 108.37 119.75 L 106.79 119.86 L 104.81 119.94 L 102.01 119.98 L 92 120 L 28 120 L 17.99 119.98 L 15.19 119.94 L 13.21 119.86 L 11.63 119.75 L 10.3 119.6 L 9.15 119.43 L 8.13 119.22 L 7.22 118.98 L 6.4 118.7 L 5.65 118.38 L 4.97 118.03 L 4.35 117.64 L 3.78 117.21 L 3.26 116.74 L 2.79 116.22 L 2.36 115.65 L 1.97 115.03 L 1.62 114.35 L 1.3 113.6 L 1.02 112.78 L 0.78 111.87 L 0.57 110.85 L 0.4 109.7 L 0.25 108.37 L 0.14 106.79 L 0.06 104.81 L 0.02 102.01 L 0 92 Z");
}

clip-path: path() is supported in all evergreen browsers (Chrome, Edge, Firefox, Safari) but not in Internet Explorer.

Corner Geometry Guide

Why Corners Need Real Math

Both tools on this page fix the same underlying problem: eyeballing a border-radius value looks fine in isolation but falls apart the moment it interacts with something else — a parent's padding, or the sharp geometry of a rectangle's actual corner.

Why "Same Radius" Looks Pinched

A rounded corner is an arc drawn from a center point. If an outer box and its padded inner child use the same radius, the inner arc's center sits in a completely different place — the two curves aren't concentric, so the gap between them visibly narrows right at the corner instead of staying constant. Subtracting the padding from the radius moves both centers to the same point, so the curves run truly parallel.

Why border-radius Alone Can't Make a Squircle

CSS border-radius always draws a quarter-circle: |x/R|² + |y/R|² = 1. A superellipse generalizes that exponent: |x/R|ⁿ + |y/R|ⁿ = 1. At n=2 it's identical to a normal rounded corner; as n grows the curve hugs the straight edges longer before turning, producing the flatter, more "continuous curvature" look of an iOS app icon. There's no CSS property for this — it has to be built as a path and applied with clip-path.

Step-by-Step: How to Use These Tools

01

Nested radius: match your real padding

Set Outer Radius and Padding to your actual card/container values — the computed inner radius is only correct for that exact padding.

02

Nested radius: export the whole scale

Copy the CSS variables or Tailwind config — six synchronized outer/inner pairs, all derived from one base radius and padding.

03

Squircle: pick a size that matches your element

Use the Icon preset for app icons and avatars, Button or Card for UI elements — corner radius is automatically clamped so it never exceeds half the shorter side.

04

Squircle: dial in smoothing, then export

0% is a plain rounded corner; ~50% approximates Apple's iOS icon curve; 100% pushes toward a rounded square. Copy the clip-path CSS to apply it to a real element, or the SVG markup to export it as an asset.

Frequently Asked Questions

What is concentric (nested) border-radius?

It's the practice of setting a padded child element's radius to outerRadius − padding, so both the outer and inner curves share the same center point and run parallel instead of pinching together at the corners.

What exactly is a 'squircle'?

A squircle is a shape between a square and a circle, mathematically a superellipse: |x/R|ⁿ + |y/R|ⁿ = 1. Apple popularized it for iOS app icons because it has continuous curvature — no abrupt change in how sharply the edge bends — which a normal rounded rectangle corner doesn't have.

Is this the exact same curve Apple uses for iOS icons?

No — Apple's exact icon curve is proprietary. n≈5 is a widely used approximation that looks very close. This tool exposes the exponent as a 0–100% smoothing slider so you can match it to your eye rather than a single fixed value.

Why clip-path instead of border-radius for the squircle?

border-radius can only draw circular arcs. A superellipse needs an arbitrary path, so it's built as an SVG path string and applied with CSS clip-path: path("..."), which every evergreen browser supports.

Does the squircle work on non-square elements like buttons?

Yes — width and height are independent, and the corner radius is automatically clamped to half the shorter side so it never overlaps itself, even on wide, short elements like buttons.

UI Pirate Ecosystem

Suggested Tools for Your Stack

Explore related utilities in this workflow or discover cross-category tools.

View All Tools →