v149 · CSS · Shapes

rect() vs clip-path — Parity Demo

The same rect() or xywh() value now works in both shape-outside (float exclusion zone) and clip-path (visual clipping). Chrome 149 completes the parity — one declaration drives both properties.

shape controls

20px
10px
10px
20px
/* adjust sliders */
shape-outside: … ✓ Chrome 149
Text wraps around the invisible exclusion zone defined by shape-outside. The rectangle shrinks the wrappable area — the float's visual box is 120×120 but the exclusion zone is inset by the values you choose.
clip-path: … ✓ pre-149
The same shape value applied as clip-path visually clips the black square. Before Chrome 149, only clip-path accepted rect() and xywh() — now both properties use identical syntax.

syntax parity

/* Before Chrome 149 — shape-outside needed inset() */
.float {
  clip-path: xywh(10px 10px 100px 100px);  /* worked */
  shape-outside: inset(10px 10px 10px 10px);/* different syntax! */
}

/* Chrome 149 — identical syntax for both */
.float {
  clip-path: xywh(10px 10px 100px 100px);   /* still works */
  shape-outside: xywh(10px 10px 100px 100px);/* now also works */
}

/* Same for rect() */
.float {
  clip-path: rect(10px 110px 110px 10px);
  shape-outside: rect(10px 110px 110px 10px); /* Chrome 149+ */
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗