v149 · CSS · Shapes
Syntax Converter
Three equivalent ways to describe the same rectangle: rect() (edge coordinates), xywh() (origin + dimensions), and inset() (margin offsets from the reference box). Edit any field and see the others update instantly.
All three functions describe a rectangle relative to the element's reference box.
rect(top right bottom left) — absolute edge positions (auto = edge)xywh(x y w h) — offset from top-left + dimensionsinset(top right bottom left) — inset from each edge (like margin shorthand)
rect(top right bottom left)
top
right
bottom
left
shape-outside: rect(20px 160px 120px 10px);
xywh(x y width height)
x
y
width
height
shape-outside: xywh(10px 20px 150px 100px);
inset(top right bottom left)
top
right
bottom
left
shape-outside: inset(20px auto auto 10px);
Live preview — text wraps around the shape-outside region (blue tint)
CSS shapes let text flow around non-rectangular boundaries. With
rect(), xywh(), and inset() all supported in shape-outside as of Chrome 149, you can choose whichever syntax best matches your mental model — edge coordinates, origin/dimensions, or inset offsets. The float visually represents the shape-outside exclusion zone. Adjust any value above and watch the text reflow to match the new rectangle.
conversion rules
- xywh → rect: top = y, right = x + w, bottom = y + h, left = x
- rect → xywh: x = left, y = top, w = right − left, h = bottom − top
- inset → rect: requires knowing element size (box-width, box-height)
- rect/xywh → inset: same — inset is relative to the reference box edge
Because inset() is edge-relative to the element's reference box while rect() and xywh() use absolute coordinates within that box, the inset panel shows the pixel offsets assuming a 200×160px reference box for the preview below.
see also
- Text Wrap Explorer — live shape-outside controls
- Shape Parity — clip-path + shape-outside using the same value
- rect() vs clip-path Parity
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗