TIL about superellipses

“I think it will be amazing once it gets implemented.” — Lea Verou, 2013

border-corner-shape is in danger, and you can help! by Lea Verou, 28 March 2013

CSS Borders and Box Decorations Module Level 4 W3C First Public Working Draft, 22 July 2025

screenshot codepen

Skizze

screenshot CSSBattle target #29

screenshot codepen

Photo by Anachronist, CC BY-SA 4.0

screenshot codepen

Kreisgleichung x² + y² = r²

Kreisgleichung (x/r)² + (y/r)² = 1

Ellipsengleichung (x/a)² + (y/b)² = 1

Superellipsengleichung |x/a|ⁿ + |y/b|ⁿ = 1

Graphic by Ag2gaeh, CC BY-SA 4.0

TIL about superellipses

Graphic by Ag2gaeh, CC BY-SA 4.0

| k | n | keyword | — | - | - | –∞ | 0 | notch | –1 | ½ | scoop | 0 | 1 | bevel | 1 | 2 | round | 2 | 4 | squircle | ∞ | ∞ | square

screenshot codepen