v150 · CSS · Shapes · Float
shape-outside Rounded Polygon
Chrome 150's polygon(round <r> …) syntax applies equally to shape-outside. Rounded polygon float exclusions let text flow around organic shapes — no SVG, no complex bezier math.
Checking polygon(round …) support…
Corner radius (px)
16px
Float size (px)
130
Shape margin (px)
8px
Live preview — text wraps around rounded polygon float
Rounded polygon exclusion zones let text follow organic shapes that feel designed rather than mechanical. Before
polygon(round …) landed in Chrome 150, creating a soft-cornered float required a separate SVG element with a url(#clip) reference — verbose, hard to maintain, and not animatable from CSS. Now a single shape-outside declaration does it all. Adjust the corner radius above to see how softening the corners changes the text flow. Notice how the text wraps around the exclusion boundary, not around the visual element — clip-path handles the visual; shape-outside handles the flow.
shape-outside: polygon(round 16px, …);
Sharp corners (radius 0)
Sharp polygon float. The text wraps tightly around the rigid corners of the shape, creating an angular exclusion zone. This was the only option before Chrome 150.
Rounded corners (current radius)
Rounded polygon float. The same shape with
round <r> creates a gentler exclusion boundary, giving the text flow an organic, designed quality.
see also
- Shape Explorer — interactive polygon builder
- Clip-Path Gallery — visual clip examples
- Animated Clip Path — transition between sharp and rounded
- Fill Rule Combinator — evenodd + rounding together
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗