v149 · CSS · Text Wrapping

Combined Float + Clip

The same path string drives both clip-path (visual) and shape-outside (wrap contour) on the same float element. Seeing them side by side makes the difference between having shape-outside and not having it immediately obvious.

Old approach
Square float, SVG child for visuals

Before Chrome 149, shape-outside only accepted basic shapes. To wrap around a curve, you needed a square float containing an inline SVG, and the wrap contour was the box, not the curve.

clip-path only
Clipped float, no shape-outside

Adding clip-path makes the float look like the shape, but the text-wrap contour is still the 100×100 rectangle. Text flows around the full box, leaving gaps between the clipped edge and the text.

clip-path + shape-outside
Same path, text hugs the shape

With the same path on both clip-path and shape-outside, text flows along the actual contour of the shape. One path string does double duty: it clips the visual and defines the wrap boundary. No SVG element needed.

Key: clip-path: path('…') changes the visual. shape-outside: path('…') changes the wrap boundary. To make text hug a clipped element, add both with the same path.

Old approach

/* Requires an SVG child element */
.float {
  float: left;
  width: 100px;
  height: 100px;
  /* wrap is still the 100×100 box */
}
.float svg {
  position: absolute;
  inset: 0;
}

New: combined clip + shape

/* Single element, one path string */
.float {
  float: left;
  width: 100px;
  height: 100px;
  clip-path: path('…');
  shape-outside: path('…');
  /* same path — visual + wrap */
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗