demo · v139
Superellipse Comparator
Side-by-side: a regular rounded rectangle, an Apple-style squircle, an inflated notch, and a free-dial superellipse. One slider drives the same corner-shape parameter across all four, exposing how the exponent maps to perceived smoothness.
Corner shaping is enabled in Chrome 139 behind the experimental web platform features flag. To run this demo, enable
chrome://flags/#enable-experimental-web-platform-features or visit on a build that ships it stable.
2.0
32
k = 2 → circle (squircle)
k = 4 → Apple iOS
k = 0.5 → notch (concave)
k → ∞ → square
round-rect
border-radius only
squircle
corner-shape: squircle
scoop
corner-shape: scoop
k = 2.0
corner-shape: superellipse(k)
superellipse formula: |x/a|k + |y/b|k = 1
k = 2 yields an ellipse (the classic CSS rounded corner). Increasing k inflates the corner toward a sharp square; k < 1 inverts the curvature into a scoop.
k = 2 yields an ellipse (the classic CSS rounded corner). Increasing k inflates the corner toward a sharp square; k < 1 inverts the curvature into a scoop.