TIL about superellipses

A presentation at Tech Talk @ Tagesspiegel in September 2025 in by Gunnar Bittersmann

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

screenshot codepen

Slide 5

Slide 5

Skizze

Slide 6

Slide 6

screenshot CSSBattle target #29

Slide 7

Slide 7

screenshot codepen

Slide 8

Slide 8

Photo by Anachronist, CC BY-SA 4.0

Slide 9

Slide 9

screenshot codepen

Slide 10

Slide 10

screenshot codepen

Slide 11

Slide 11

Kreisgleichung x² + y² = r²

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Graphic by Ag2gaeh, CC BY-SA 4.0

Slide 15

Slide 15

TIL about superellipses

Graphic by Ag2gaeh, CC BY-SA 4.0

Slide 16

Slide 16

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

Slide 17

Slide 17

screenshot codepen

Slide 18

Slide 18

screenshot codepen

Slide 19

Slide 19

screenshot codepen