Squircle (superellipse) as SVG / CSS clip-path. The smooth iOS-style shape — border-radius can't make it.
🟦 Squircle preview
vs border-radius (left) vs Squircle (right)
SVG path d
CSS clip-path

How to use

  1. Set width, height, curvature (n).
  2. Use a preset (Ellipse, iOS, macOS, near-square) for a quick start.
  3. Compare against border-radius side-by-side.
  4. Export as SVG file, SVG path, or CSS clip-path.

Key features

  • Mathematically precise superellipse
  • Curvature 2.5–8 (4 is the iOS standard)
  • 4 presets (ellipse / iOS / macOS / near-square)
  • SVG path + CSS clip-path export
  • Visual comparison with border-radius

Use cases

  • iOS / iPadOS app icons — match Apple's official curvature
  • Web cards / buttons — smoother corners than border-radius
  • Product photo masks — apply via clip-path
  • Mobile app UI — softer than Material Design
  • SVG icon backgrounds — consistent shape

What's a squircle? vs border-radius?

Squircle (square + circle) is a special case of the superellipse curve. border-radius only rounds corners with straight sides, but a squircle has one continuous smooth outline. iOS app icons are the classic example — close inspection reveals they're squircles, not rounded squares. CSS has no native support so we use SVG path or clip-path. Formula: |x/a|^n + |y/b|^n = 1. n=4 ≈ iOS, n=2 = ellipse, n=∞ = square.

FAQ

Why not border-radius?

border-radius just rounds corners with arcs; sides are straight. A squircle's entire perimeter is one smooth curve.

Exact iOS n value?

Apple hasn't published it but analyses suggest n = 4.0–5.0. The "iOS app" preset uses 4.

Apply to images?

Use SVG clipPath or CSS clip-path on images.

Free?

Yes.