v149 · CSS · demo
Text Wrap Explorer
Adjust rectangle values to see text flowing around a floated element using shape-outside: rect() or shape-outside: xywh(). The shape defines an exclusion zone that text avoids — distinct from the element's visual box.
This text wraps around the floated element on the left. The exclusion zone defined by shape-outside tells the browser where the float occupies space, independent of the element's visual bounds. With rect() and xywh() in Chrome 149 you can offset the exclusion inward or outward from the element box without rewriting the element's dimensions. Try dragging the sliders — watch the text reflow in real time as the exclusion rectangle changes. Notice how the text can intrude into the element box when the shape is smaller, or be pushed further away when it is larger.
The blue element is 160×130 px. The shape-outside exclusion zone (shown by the text reflow) is controlled by your slider values. In Chrome 149+ the text respects the adjusted rectangle. In older browsers the text wraps around the rectangular element box.
references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗