v147 · CSS

Superellipse Explorer

superellipse(n) is the mathematical backbone of all the named corner shapes. Drag the slider to move n from 1 (diamond) through 2 (circular arc) and 5 (squircle) up to 10 (near-square). Named values like squircle and scoop are shortcuts for specific ranges of n.

Feature detection: checking…
corner-shape not supported in this browser — shapes shown are approximated with border-radius and SVG. Use Chrome 147+ to see the real property.
Live superellipse(4)
squircle ≈ superellipse(5)
round = superellipse(2)
4.0
1 (diamond) 2 (circle) 5 (squircle) 10 (near sq.)
Drag the slider

Named values and their n equivalents

All with border-radius: 25%

contract checks

accept superellipse(3.5) checking…
accept superellipse(-1.2) checking…
accept superellipse(0) checking…
reject superellipse(foo) checking…

Use the malformed-value button to try corner-shape: superellipse(foo) on the live shape.

/* The five named corner-shape values and their superellipse equivalent */

corner-shape: round;             /* superellipse(2) — circular arc   */
corner-shape: squircle;          /* superellipse(≈5) — iOS icon shape */
corner-shape: bevel;             /* superellipse(1) — chamfer/45°     */
corner-shape: notch;             /* concave superellipse inward        */
corner-shape: scoop;             /* concave circular scoop             */
corner-shape: superellipse(3.5); /* between round and squircle        */

/* All values animate when transitioned */
.card {
  border-radius: 25%;
  corner-shape: round;
  transition: corner-shape 0.4s ease;
}
.card:hover {
  corner-shape: squircle;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗