shape-margin

Sets a margin for a shape created with 'shape-outside'. It adds a buffer of empty space between the custom shape and the text wrapping around it.

It is documented as part of the CSS Shapes specification.

/* Usage Example */
.circle-wrap {
  float: left;
  shape-outside: circle(50%);
  /* Pushes the text 20px away from the curve of the circle */
  shape-margin: 20px;
}

/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: revert;
shape-margin: revert-layer;
shape-margin: unset;
Widely available Since 2020 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

37+
62+
10.1+
79+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC