v149 · CSS · shape-outside · Float

Magazine Layout

Print magazines have wrapped text following irregular column edges for decades. Chrome 149 lets CSS do the same: shape-outside: shape(…) or shape-outside: path(…) wraps body text around an arbitrary float shape, no SVG needed.

The required shape-outside value is not supported. This browser will use the float's rectangular fallback. Browser version alone does not prove that the capability is enabled.

choose a shape

In the age of digital typography, editorial design has rediscovered an ancient pleasure: text that flows around obstacles with grace. For centuries, scribes and compositors shaped paragraphs around illuminated initials, medallions, and maps inset into the running text. CSS shape-outside revives this tradition for the web. By declaring a geometric path as the float exclusion boundary, a block of prose can contour itself to the silhouette of any shape — a rounded corner, a swooping arc, a five-pointed star. The column hugs the edge; the words settle in; the page breathes. Chrome 149 extends this capability to accept the same path() and shape() functions already used in clip-path, making the vocabulary consistent and the authoring experience uniform across the two properties. No SVG coordinates, no JavaScript measurements — just CSS, expressing centuries-old layout intuition in a handful of tokens. The result is editorial design that finally belongs to the web.
/* select a shape above */

path() vs. shape()

/* path() — uses SVG path data (absolute pixels) */
.float { shape-outside: path('M 110 0 A 110 110 0 1 1 109.9 0 Z'); }

/* shape() — uses CSS path commands with CSS units (responsive) */
.float { shape-outside: shape(from 50% 0%, arc to 50% 100% of 50% 50%); }

/* Key difference: shape() accepts %, vw, em — path() only px */
/* Both now work in shape-outside (Chrome 149) */

see also

implementation reference

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