v147 · CSS

Shape Animation

corner-shape: superellipse(n) interpolates its numeric argument — you get a smooth morph between any two n values. Named values (squircle, bevel, notch) are discrete and snap. Both patterns have uses: use continuous superellipse for smooth transitions, use keyframes with steps for instant shape changes.

Feature detection: checking…
What's interpolatable?
superellipse(n) — yes, n interpolates as a <number>. Smooth morph between any two values.
Named values (round, squircle, bevel, notch, scoop) — discrete. They snap at the midpoint of a transition, like display.

Hover transitions

round → squircle
transition: 0.4s ease
squircle → bevel
discrete snap
bevel → notch
discrete snap
superellipse(2) → (8)
smooth interpolation

Hover any shape. The last one uses superellipse(n) so it morphs smoothly; the others snap because named values are discrete.

CSS Keyframe animations

Named values
steps(1) — discrete snap
superellipse(n)
linear — smooth morph
4 s

Easing functions on superellipse (hover each shape)

contract checks

accept superellipse(2) checking…
accept superellipse(8) checking…
accept discrete named value checking…
reject malformed animation target checking…

Use the malformed-target button to try corner-shape: superellipse(foo) on the animated superellipse sample.

/* Smooth morph — superellipse(n) is interpolatable */
.icon {
  border-radius: 25%;
  corner-shape: superellipse(2);
  transition: corner-shape 0.5s ease-in-out;
}
.icon:hover {
  corner-shape: superellipse(5);  /* smooth numeric interpolation */
}

/* Discrete snap — named values */
.btn {
  border-radius: 20%;
  corner-shape: round;
  transition: corner-shape 0.3s;  /* snaps at 50% through transition */
}
.btn:hover {
  corner-shape: squircle;         /* jumps, like display: none/block */
}

/* Keyframe animation — morph through n values */
@keyframes pulse-shape {
  0%   { corner-shape: superellipse(2); }
  50%  { corner-shape: superellipse(7); }
  100% { corner-shape: superellipse(2); }
}
.pulsing { animation: pulse-shape 2s ease-in-out infinite; }

see also

implementation reference

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