v149 · CSS · demo
Text Wrap Flow
Use shape-outside: shape(…) to wrap text around a custom-shaped float — arcs, curves, and all. Both the clip and the exclusion area use the same shape() syntax.
shape-outside: shape(). In older browsers the text wraps around the rectangular bounding box of the float.
float
The CSS shape() function brings SVG-like path commands to CSS properties. Where polygon() required straight edges, shape() supports arcs, curves, and complex contours — and unlike path(), all coordinates can be expressed as percentages so the shape scales with the element.
This paragraph is wrapping around the coloured float on the left. The float's shape-outside and clip-path both use the same shape() value — so the text exclusion zone exactly matches the visible shape of the element. Previously achieving this required SVG or JavaScript-computed polygon approximations.
Try switching shapes above. Each one recalculates shape-outside and clip-path simultaneously, demonstrating how a single shape definition drives both appearance and text layout.
see also
- Shape Sculptor — build shapes and compare syntax
- Back to feature index
- ChromeStatus entry