Newly availableUseful when rect() and xywh() adds emphasis or visual refinement without becoming necessary for understanding content.
Effects Newly available

rect() and xywh()

The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.

Effects

Overview

The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.basic-shape.rect
119
119
122
17.2
119
17.2
CSS type
xywh

The xywh() CSS function creates a rectangle using the specified distances from the left (x) and top (y) edges of the containing block and the specified width (w) and height (h) of the rectangle. It is a basic shape function of the basic-shape data type. You can use the xywh() function in CSS properties such as offset-path to create the rectangular path…
119
119
122
17.2
119
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (119)
Implementation note
  • Only supported on the `offset-path` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (119)
Implementation note
  • Only supported on the `offset-path` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (119)
Implementation note
  • Only supported on the `offset-path` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (119)
Implementation note
  • Only supported on the `offset-path` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (119)
Implementation note
  • Only supported on the `offset-path` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (119)
Implementation note
  • Only supported on the `offset-path` property.

Syntax

CSS 
.crop {
  clip-path: rect(10px 200px 150px 20px);
}
.highlight {
  clip-path: xywh(20px 10px 180px 140px round 8px);
}

Live demo

Rect() clip

CSS Rect() clip demo.

PreviewFullscreen

Xywh() clip

CSS Xywh() clip demo.

PreviewFullscreen

xywh() + round

CSS Xywh() + round demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use rect() and xywh() 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

Powered by web-features