CSS Clip Path: Browser Support, Shapes, Use Cases

What is CSS clip-path?

CSS clip-path is a W3C property from the CSS Masking Module Level 1 that clips an element to a smaller visible region. Pixels inside the clipping path show, pixels outside hide, and the layout box stays the same size. The value accepts a basic shape, an SVG path() string, or a url() reference to an inline clipPath.

Which browsers does CSS clip-path support?

Every modern desktop and mobile browser supports the unprefixed clip-path property, while older Chromium and WebKit builds need the -webkit-clip-path prefix and Internet Explorer never shipped any support. Global coverage reaches roughly 97% when partial, prefixed support is counted.

What shape functions does CSS clip-path support?

The clip-path property accepts seven shape functions, an SVG url() reference, and the geometry-box keywords for choosing the reference box. Each function maps to a distinct visual cutout pattern, and browser support varies by function.

• inset(): Defines an inset rectangle from the four edges of the reference box, with optional border-radius for rounded corners. Supported wherever basic clip-path ships, so Chrome 55+, Firefox 54+, Safari 14+, and Edge 79+.
• circle(): Draws a circle from a radius and a position, useful for avatars and round photo cutouts. Example: clip-path: circle(50% at center).
• ellipse(): Draws an ellipse from two radii and a position, useful for oval cutouts and stretched portrait shapes.
• polygon(): Builds a polygon from x and y vertex pairs and an optional fill rule (nonzero or evenodd). Hexagons, arrows, chevrons, and angled banner edges all use polygon().
• path(): Accepts an SVG path data string, the same syntax used in the d attribute of an SVG path element. Works in Chrome 88+, Edge 88+, Firefox 71+, Safari 15.4+, Opera 74+, and Samsung Internet 15+. Values are interpreted as raw pixels, so the shape does not scale with the element.
• shape(): Builds a shape from CSS-style move, line, curve, and arc commands that accept percentages, lengths, and custom properties, so the shape scales with the element. Supported in Chrome 133+ and Safari 18.4+; not supported in Firefox.
• xywh() and rect(): Define a rectangle from x, y, width, height (xywh) or from the four edges (rect). Useful for cropping a known region of an image. Supported in Chrome 118+, Edge 118+, Firefox 128+, and Safari 17.4+.
• url(): References an inline SVG clipPath element by id, useful when the clipping path is a complex vector drawn in an SVG editor. The only clip-path value Firefox supported before version 54.

Geometry-box keywords like border-box, padding-box, content-box, fill-box, stroke-box, and view-box can follow any shape function and tell the browser which reference box the shape is measured against. The default is border-box.

How do you animate with CSS clip-path?

Set clip-path on both keyframes using the same shape function with the same number of points, then drive the change with a CSS transition or @keyframes rule. Mismatched shape types or vertex counts fall back to a discrete, instant swap.

• Pick one shape function for both keyframes: The from and to values must use the same function (polygon to polygon, circle to circle). The browser only interpolates between matching shapes.
• Match the vertex count for polygon(): A polygon with four points can only animate to another polygon with four points. To animate from a triangle to a square, pad the triangle with a duplicate vertex so both shapes have four points.
• Add a transition or @keyframes rule: Set transition: clip-path 400ms ease on the element, or define @keyframes that change clip-path frame by frame.
• Pair the prefixed declaration: Add -webkit-clip-path on every keyframe alongside clip-path so the animation runs on Safari 6.1 to 13 and older Chromium and Samsung Internet builds.
• Verify the animation in DevTools: Use the browser's animation panel to confirm the interpolation is smooth, not a discrete swap. A discrete swap is the signal that the two keyframes do not share the same shape function or vertex count.

/* Basic shape: clip a circle and pair with the WebKit prefix. */
.avatar {
    -webkit-clip-path: circle(50% at center);
            clip-path: circle(50% at center);
}

/* Polygon: a six-point hexagon. */
.hex {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Animate between two polygon shapes with matching vertex counts. */
.reveal {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 400ms ease;
}
.reveal:hover {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

The reveal pattern above starts with a zero-width polygon and animates out to the full element on hover. Drop the rules into a stylesheet, attach the matching class, and the clip animates on every browser that supports either the prefixed or unprefixed property.

What are the known issues with CSS clip-path?

CSS clip-path has a few sharp edges that show up only when you ship to production across browsers. Plan around these before you replace static SVG cutouts with a clip-path rule.

• The -webkit-clip-path prefix is still required for older Blink and WebKit: Chrome 24 to 54, Edge does not need it (Chromium Edge starts at 79), Safari 6.1 to 13, Safari on iOS 7 to 13, Samsung Internet 1.5 to 5, and Opera 15 to 41 only recognize the prefixed property. Drop the prefix and the clip disappears on every device that has not updated past those builds.
• Firefox supported only url() references before version 54: Firefox 3.5 through 53 ignored basic shapes, path(), and shape() and only honored clip-path: url(#id) pointing at an inline SVG clipPath. Fall back to an inline SVG clipPath if you target Firefox ESR releases older than 54.
• shape() is not supported in Firefox: The shape() function ships in Chrome 133+ and Safari 18.4+ but not in any Firefox version. Use polygon() or path() when you need a Firefox-compatible vector clip.
• External SVG clipPath references are unreliable: Chromium and WebKit have open bugs for shapes referenced from an external SVG file. Inline the clipPath inside the same document as the element to avoid the issue across browsers.
• path() does not scale with the element: The SVG path data inside path() is interpreted as raw pixels, so the shape stays the same size when the element grows or shrinks. Use shape() or polygon() with percentage points when you need a responsive clip.
• clip-path creates a new stacking context: Any computed value other than none promotes the element to its own stacking context, which can break z-index ordering against sibling elements. Audit z-index when you add clip-path to a previously flat layout.
• Animation falls back to a discrete swap on mismatched shapes: Animating between polygon() values with different vertex counts, between different shape functions, or between url() references skips interpolation and instantly swaps the value at the halfway point.

In my experience, the prefix gap catches more teams than any other clip-path quirk: a polished clip design ships, looks perfect in current Chrome and Safari, and silently drops on a two-year-old iPhone or Galaxy because the unprefixed declaration is the only one in the stylesheet, so always include both lines and run the page through a real Safari 13 device before release.

Citations

All CSS clip-path version numbers and platform notes in this guide come from these primary sources:

• MDN clip-path CSS property: developer.mozilla.org/en-US/docs/Web/CSS/clip-path
• MDN basic-shape CSS data type: developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
• MDN path() CSS function: developer.mozilla.org/en-US/docs/Web/CSS/path
• MDN shape() CSS function: developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape
• MDN polygon() CSS function: developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon
• W3C CSS Masking Module Level 1: drafts.csswg.org/css-masking-1
• WebKit blog, CSS Shapes: webkit.org/blog/3709/css-shapes-coming-to-webkit-nightly-and-safari-7-1
• web.dev, Paths, shapes, clipping, and masking: web.dev/learn/css/paths-shapes-clipping-masking
• Chrome Platform Status, CSS shape() function: chromestatus.com/feature/5172258539339776
• MDN Animating clip-path guide: developer.mozilla.org/en-US/docs/Web/CSS/clip-path#interpolation