v149 · css · covered on mdn
Support path() and shape() in shape-outside
Chrome 149 extends the CSS shape-outside property to accept the path() and shape() basic-shape functions — the same functions already supported in clip-path and offset-path. Text can now wrap around arbitrary curves and arcs, inline in CSS, without image hacks.
this feature is documented on MDN
MDN: shape-outside
MDN's shape-outside reference documents all accepted basic-shape values — including path() and shape() — with syntax, formal grammar, browser compatibility, and spec links. gendn doesn't duplicate that here.
quick reference
| Property | shape-outside |
|---|---|
| New values | path(), shape() |
| What changes | Arbitrary paths and curves can now define float exclusion regions — previously only circle(), ellipse(), inset(), polygon(), and image URLs were accepted. |
path() syntax | path( <fill-rule>? , <string> ) — SVG path data string, e.g. path("M 0 0 C 50 0, 100 50, 100 100 Z") |
shape() syntax | shape( <fill-rule>? from <position>, <shape-command># ) — supports line, curve, arc, smooth, and close commands with calc() and var() |
| Parity | Brings shape-outside into line with clip-path and offset-path which have accepted both functions since Chrome 137 |
| Shipped in | Chrome 149 (desktop, Android, WebView, iOS) |
| ChromeStatus | 5080980370096128 — Support path() and shape() in shape-outside |
| Spec | CSS Shapes Level 1 — shape-outside |