v149 · CSS · Text Wrapping
Path Shape Builder
Pick a preset path, adjust size and margin, and watch text wrap around it in real time using shape-outside: path(…). Copy the generated CSS declaration and use it in your own project.
Text wrapping preview
The shape-outside property defines a shape — applied to a float — around which adjacent inline content should wrap. Before Chrome 149, only basic shapes (circle, ellipse, inset, polygon) were available. Now path() and shape() let you use arbitrary SVG paths and CSS-native curves. Inline text flows around the contour of the shape, creating rich editorial layouts without any JavaScript or external SVG files. This builder generates the exact CSS you need — resize the shape, try different floats, and copy the output.
/* Pick a preset */see also
- Combined Float Clip — same path for clip-path and shape-outside
- path() Wrapping Demo — custom SVG paths
- Magazine Layout — five editorial shape presets
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗