v149 · css · shipped

rect() and xywh() in shape-outside

Chrome 149 extends shape-outside to accept the rect() and xywh() basic shape functions — the same rectangle syntax already usable in clip-path and offset-path — completing cross-browser parity with Firefox and Safari.

at a glance

Shipped in	Chrome 149 (desktop + Android + WebView + iOS)
Status	Enabled by default
Flag	None
Spec	CSS Shapes Module Level 1 §basic-shape-functions
ChromeStatus	6323071520735232 — Support rect() and xywh() in shape-outside

why it exists

The rect() and xywh() functions define rectangles by absolute coordinates or x/y/width/height rather than edge insets. They have been supported in clip-path, offset-path, and other shape contexts for some time. However, Chrome's implementation of shape-outside only accepted the older inset(), circle(), ellipse(), and polygon() functions — forcing developers to convert their rect()/xywh() coordinates to equivalent inset() values when using float shapes. Firefox and WebKit already supported rect() and xywh() in shape-outside. Chrome 149 closes this compatibility gap.

Source: chromestatus feature 6323071520735232.

function syntax

rect()

Defines a rectangle by its edge coordinates relative to the reference box.

rect( top  right  bottom  left )
rect( top  right  bottom  left  round <border-radius> )

Argument	Meaning
`top`	Distance of the rectangle's top edge from the top of the reference box. `auto` = 0%.
`right`	Distance of the rectangle's right edge from the left of the reference box. `auto` = 100%.
`bottom`	Distance of the rectangle's bottom edge from the top of the reference box. `auto` = 100%.
`left`	Distance of the rectangle's left edge from the left of the reference box. `auto` = 0%.

Source: CSS Shapes Level 1 §typedef-basic-shape-rect.

xywh()

Defines a rectangle by its top-left origin and dimensions.

xywh( x  y  width  height )
xywh( x  y  width  height  round <border-radius> )

Argument	Meaning
`x`	Left inset — distance from the left edge of the reference box to the rectangle's left edge.
`y`	Top inset — distance from the top edge of the reference box to the rectangle's top edge.
`width`	Width of the rectangle. Must be ≥ 0.
`height`	Height of the rectangle. Must be ≥ 0.

Source: CSS Shapes Level 1 §typedef-basic-shape-xywh.

example: float text around a rectangle using xywh()

.figure {
  float: left;
  width: 200px;
  height: 200px;
  /* Wrap text around a 160×160 area inset 20px on all sides */
  shape-outside: xywh(20px 20px 160px 160px round 8px);
  margin: 8px;
}

This is equivalent to the pre-Chrome-149 workaround: shape-outside: inset(20px round 8px). The xywh() form is directly portable from a clip-path: xywh(…) on the same element.

example: rect() — top/right/bottom/left coordinates

.aside {
  float: right;
  width: 300px;
  /* Float text around only the top-right portion of the box */
  /* rect(top, right, bottom, left) — all measured from origin */
  shape-outside: rect(0px 300px 200px 40px);
  /* Equivalent inset(): inset(0px 0px calc(100% - 200px) 40px) */
}

choosing between rect(), xywh(), and inset()

Function	Use when
`inset()`	You think in terms of how far to shrink each edge inward from the reference box — e.g. "10px from all sides".
`xywh()`	You think in terms of origin + size — same coordinates you'd use for an SVG `<rect>` or a canvas `drawRect()`. Also matches `clip-path: xywh(…)` directly.
`rect()`	You have edge coordinates (top, right, bottom, left positions) rather than insets. Useful when coordinates come from `getBoundingClientRect()`.

Source: CSS Shapes Level 1 §basic-shape-functions.

browser support

Chrome	149+ (enabled by default)
Edge	149+ (Chromium)
Firefox	Supported (rect() and xywh() in shape-outside)
Safari	Supported (rect() and xywh() in shape-outside)

Source: chromestatus.com, May 2026.