Newly available Useful when Clip path boxes adds emphasis or visual refinement without becoming necessary for understanding content.

Clip path boxes

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.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.clip-path.fill-box
119
119
51
13.1
119
13.4
CSS property
stroke-box
119
119
51
13.1
119
13.4
view-box
119
119
54
13.1
119
13.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • This value was supported before Firefox 51, but as an alias to `border-box`.
Notes 1 item(s)
Implementation note
  • This value was supported before Firefox 51, but as an alias to `border-box`.

Syntax

CSS 
.svg-clip {
  clip-path: circle(50%) fill-box;
}
.stroke-clip {
  clip-path: inset(10%) stroke-box;
}

Live demo

circle() fill-box

CSS Circle() fill-box demo.

PreviewFullscreen

Inset() clip

CSS Inset() clip demo.

PreviewFullscreen

Polygon() clip

CSS Polygon() clip demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use Clip path boxes to add depth, masking, blending, or special treatment to supporting visuals.

  • Brand expression

    Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.

Cautions

  • Heavy effects can hurt performance or readability on lower-end devices.
  • Do not use visual effects as the only way to communicate meaning or state.

Accessibility

  • Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
  • Visual polish should never reduce content legibility.

Related links