v149 · CSS · shape() Function Demo

shape() Function Demo

Compare the path() syntax (absolute SVG coordinates) with the newer shape() CSS function (relative commands, CSS units, percentage support). Both work in shape-outside — shape() is better suited for responsive layouts.

Chrome 149 required. shape() inside shape-outside is a Chrome 149+ addition. Older browsers fall back to rectangular box wrapping.

live comparison

path() — absolute SVG coords

path()
curve
Text wraps this cubic bezier defined with absolute SVG coordinates. Works everywhere path() is supported. Units are user-space pixels relative to the element's border box.

shape() — CSS-native syntax

shape()
curve
Same visual shape expressed with the shape() function using CSS-native move, line, and curve commands. Percentages and responsive units work here — the path adapts to the element size.

syntax comparison

Feature path() shape()
Coordinate system Absolute, user-space pixels Relative or absolute, any CSS length
Percentage support No Yes — 50% 50% etc.
Responsive sizing Fixed pixel values only Adapts as element resizes
Syntax origin SVG d attribute string New CSS function syntax
Command set M, L, H, V, C, Q, A, Z move, line, hline, vline, curve, smooth, arc, close
Best for Fixed-size shapes, copy-paste from design tools Responsive layouts, percentage-based contours

code comparison

/* path() — same string as SVG 'd' attribute */
.float {
  float: left;
  width: 120px;
  height: 140px;
  shape-outside: path('M 0 0 C 0 60, 120 60, 120 140 L 0 140 Z');
}

/* shape() — CSS function with named commands and CSS units */
.float-responsive {
  float: left;
  width: 120px;
  height: 140px;
  /* "from X Y" sets the starting point, then chained commands */
  shape-outside: shape(
    from 0% 0%,
    curve to 100% 100% with 0% 50%, 100% 50%,
    line to 0% 100%,
    close
  );
  /* This shape adapts when the element's width/height changes */
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

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