v150 · CSS · Shapes

Animated Clip Path

clip-path: polygon(round …) is fully animatable — you can transition or keyframe between a sharp polygon and a rounded one. Hover a shape to see the corners animate smooth, or press Play for a continuous morph between sharp and rounded.

20px
0.5s
hover shapes to preview; Play for continuous morph
hover me
polygon() — sharp
always rounded
polygon(round …)
morphing
animated morph

code

/* Sharp → rounded on hover */
.shape {
  clip-path: polygon(/* vertices */);
  transition: clip-path 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shape:hover {
  clip-path: polygon(round 20px, /* same vertices */);
}

/* Keyframe morph */
@keyframes morph-rounding {
  0%, 100% { clip-path: polygon(/* sharp */); }
  50%       { clip-path: polygon(round 20px, /* same vertices */); }
}
.shape {
  animation: morph-rounding 2s ease-in-out infinite;
}

/* Works for any polygon shape — triangle, diamond, hexagon, arrow, star */

see also

implementation reference

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