Clip path boxesBaseline · Widely available

The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Nov 2, 2023. Widely available since May 2, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–118Not supported

119+Supportedsince Oct 31, 2023

Current: 155

Edge

12–118Not supported

119+Supportedsince Nov 2, 2023

Current: 154

Firefox

1–53Not supported

54+Supportedsince Jun 13, 2017

Current: 157

Safari

1–13Not supported

13.1+Supportedsince Mar 24, 2020

Current: 27

MobileChrome Android

18–118Not supported

119+Supportedsince Oct 31, 2023

Current: 155

Firefox Android

4–53Not supported

54+Supportedsince Jun 13, 2017

Current: 157

Safari iOS

1–13Not supported

13.4+Supportedsince Mar 24, 2020

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using

@supports (clip-path: fill-box) {
  /* styles that rely on clip-path: fill-box */
}

/* or in JavaScript */
if (CSS.supports("clip-path", "fill-box")) {
  // use it
}

Specification

drafts.csswg.org#the-clip-path ↗

Sub-features

Support for each part of the feature (3). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
clip-path.fill-box	119	119	51	13.1	119	51	13.4
clip-path.stroke-box	119	119	51	13.1	119	51	13.4
clip-path.view-box	119	119	54	13.1	119	54	13.4