v149 · CSS · Shapes
inset() vs rect() vs xywh()
Three syntaxes, one shape. This demo places the same rectangle on a float using inset(), rect(), and xywh(). Adjust the sliders to explore and see how the declarations differ.
Top offset (px)
15
Left offset (px)
10
Width (px)
90
Height (px)
80
inset() — oldest, always supported
Text reflows around the exclusion zone. The
inset() syntax specifies margins from each edge of the reference box — top, right, bottom, left — and has been supported the longest.
shape-outside: inset(15px auto auto 10px);
rect() — added Chrome 149
The
rect() syntax names each parameter by its edge — top, right, bottom, left — as absolute coordinates from the origin of the reference box. More explicit than inset().
shape-outside: rect(15px 100px 95px 10px);
xywh() — added Chrome 149
The
xywh() syntax uses x, y, width, height — familiar to anyone who uses canvas or SVG. Easiest when you think in terms of "place a box at this coordinate with these dimensions."
shape-outside: xywh(10px 15px 90px 80px);
| Feature | inset() | rect() | xywh() |
|---|---|---|---|
| Parameters | top right bottom left |
top right bottom left |
x y width height |
| Reference | Inset from edges | Absolute edge coords | Origin + size |
auto keyword |
✓ | ✓ | ✗ |
| Works with clip-path | ✓ | ✓ | ✓ |
| Works with shape-outside (Chrome 149) | ✓ (always) | ✓ (new) | ✓ (new) |
| Mental model | Shrink from edges | Name exact edges | Place a box |
see also
- Syntax Converter — convert between all three syntaxes live
- Text Wrap Explorer — interactive shape-outside controls
- Shape Parity — same value in clip-path and shape-outside
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗