shape()
A function used in 'clip-path' and other properties to define custom 2D shapes using commands like 'move', 'line', and 'curve'. It's basically like writing SVG paths directly in CSS.
Quick example
.custom-bg {
/* Defines a triangle using the shape() function */
clip-path: shape(from 0 0, line to 100% 0, line to 50% 100%, close);
}shape() Browser Support
Newly availableSince 202685% global usage
Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
135+
148+
18.4+
135+