demo · v149

shape-margin with rect() and xywh()

shape-margin works with every shape-outside value — including the new rect() and xywh() rectangle functions. It adds a gap between the visible float edge and the text-wrap boundary, useful when the shape clips to a narrower region than the float's box and you want breathing room around the clipped shape.

shape-margin explained: shape-margin: N expands the text-wrap exclusion zone outward from the shape boundary by N pixels — the text always wraps at least N pixels away from the shape edge. Drag the shape-margin slider below to see the dashed margin boundary pull text away from the blue shape.

shape-margin: 0px

rect inset: 20px

Syntax:

Float side:

Clipped shape (clip-path)

Text wrap boundary (shape + shape-margin)

The shape-margin property adds a gutter between the shape edge and the flowing text. Without it, text can appear to touch the visible element right at its boundary — fine for some designs, but often cramped for readable editorial layout. With shape-margin: 12px, text flows at least 12 pixels away from the clipped edge.

When clip-path cuts the visible element to a smaller region (here: an inset rectangle within the float's full box), shape-outside with the same rect() or xywh() value defines where text avoids — and shape-margin expands that avoidance region outward. The result is polished editorial breathing room in pure CSS.

.wrap-float { float: left; width: 180px; height: 160px; clip-path: rect(20px 160px 140px 20px); shape-outside: rect(20px 160px 140px 20px); shape-margin: 0px; }

No shape-margin (0px)

Text hugs the clipped edge tightly. Readable but cramped when the shape sits close to the baseline grid.

shape-outside: rect(8px 72px 62px 8px);
shape-margin: 0px;

With shape-margin: 12px

Text flows with 12 px breathing room around the clipped shape, giving the editorial layout room to breathe.

shape-outside: rect(8px 72px 62px 8px);
shape-margin: 12px;

/* shape-margin works with rect() and xywh() just like with polygon() */

/* Using rect(): top, right, bottom, left edges relative to float box */
.float-rect {
  float: left;
  width: 200px; height: 180px;

  /* clip-path and shape-outside use the same rect() */
  clip-path:     rect(20px 180px 160px 20px);
  shape-outside: rect(20px 180px 160px 20px);

  /* Push text 12px away from the shape boundary */
  shape-margin: 12px;
}

/* Using xywh(): x, y, width, height */
.float-xywh {
  float: left;
  width: 200px; height: 180px;

  clip-path:     xywh(20px 20px 160px 140px);
  shape-outside: xywh(20px 20px 160px 140px);
  shape-margin: 12px;
}

/* rect() and xywh() express the same rectangle differently:
   rect(20px 180px 160px 20px) === xywh(20px 20px 160px 140px)
   rect(top right bottom left) vs xywh(x y width height)         */

implementation reference

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

see also

implementation reference