This note has an interactive demo. Try it in the original

You can now draw a star, a blob or a speech bubble in clip-path with percentages, px , calc() and custom properties, and morph between shapes with a single transition : the CSS shape() function has been Baseline since February 2026.

For years, any clip-path more interesting than circle() or polygon() meant path() , and path() takes an SVG path string where every number is a pixel. That's fine for a fixed-size icon, but it breaks the moment the element resizes: the shape doesn't scale, and you end up recalculating the string in JavaScript. shape() uses the same drawing model as SVG paths, but written in CSS syntax, so each coordinate can be whatever CSS value makes sense.

What shape() is

shape() is a <basic-shape> function, and MDN lists it for clip-path , offset-path and the newer border-shape .…