Squircle vs. Rounded Rectangle: The Math Behind Apple Corners and G2 Curves (2026)

1. The Continuity Hierarchy: G0, G1, and G2 Explained

In computer-aided industrial design and vector typography, transitions between line segments are classified by their degree of geometric smoothness:

2. The Lamé Curve Formula: Decoding Exponent "n"

In 1818, French mathematician Gabriel Lamé published the general equation for superellipses:

When tuning geometric shapes for digital devices, the exponent $n$ controls the profile:

• $n = 2$: Standard circle (or ellipse when $a eq b$). Constant, uniform curvature.
• $n = 4$: Classic mathematical Squircle. Flat midsections with soft continuous transitions.
• $n approx 4.5 ext{--}5$: Apple's iOS icon profile. Preserves straight edges across 60% of the bounding box while softening the corner approach.
• $n o infty$: Pushes coordinates completely to the bounding corners, resulting in an unrounded rectangle.

3. Why CSS Cannot Do This Natively (And Why Houdini Failed)

Modern browsers still lack a native border-corner-shape: squircle property. Developers have experimented with three alternative implementations, each carrying concrete production trade-offs:

That third approach is what the RapidDoc Image Radiator implements. The engine draws your source photo onto an offscreen canvas, clips the border using cubic Bézier splines calibrated to $n=4.5$, and exports a clean transparent PNG.

4. Production Code: Vanilla JavaScript Canvas Squircle Clipper

If you want to render a true G2-approximated squircle directly inside an HTML5 <canvas> element without third-party libraries, use this cubic Bézier curve implementation:

function drawSquirclePath(ctx, x, y, width, height, r) {
  // r: corner radius scalar (e.g. 0.22 * width for Apple icons)
  const a = width / 2;
  const b = height / 2;
  const k = 0.5522847498; // Standard circle kappa
  // Shift control points outward to simulate n=4.5 curvature acceleration
  const squircleOffset = r * 0.35; 

  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + width - r, y);
  ctx.bezierCurveTo(x + width - squircleOffset, y, x + width, y + squircleOffset, x + width, y + r);
  ctx.lineTo(x + width, y + height - r);
  ctx.bezierCurveTo(x + width, y + height - squircleOffset, x + width - squircleOffset, y + height, x + width - r, y + height);
  ctx.lineTo(x + r, y + height);
  ctx.bezierCurveTo(x + squircleOffset, y + height, x, y + height - squircleOffset, x, y + height - r);
  ctx.lineTo(x, y + r);
  ctx.bezierCurveTo(x, y + squircleOffset, x + squircleOffset, y, x + r, y);
  ctx.closePath();
}

5. Dual-Layer Ambient Occlusion Shadows

Rounding an asset without giving it depth leaves it looking flat. But applying a harsh black drop shadow (0 10px 20px rgba(0,0,0,0.5)) looks dated. Real light in a physical room scatters into two distinct shadow layers:

When you combine G2 squircle clipping with dual-layer ambient occlusion, your screen captures feel like tangible physical cards floating above the page. In social feeds, this tactile quality stops users from scrolling past.

6. Asymmetrical Radii & Screenshot Window Chrome

Decoupling individual corners allows you to build directional UI shapes:

For software documentation and product launches, the Image Radiator lets you wrap any screenshot in simulated macOS window chrome with red (#FF5F56), yellow (#FFBD2E), and green (#27C93F) traffic-light controls. All rendered locally in your browser memory.