shape() | CSS Types & Functions

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

Limited availability 0% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Interop 2026 focus area ? Learn more →