How to Use the CSS shape-margin Property

The CSS shape-margin property is used to create space between wrapping inline text and the boundary defined by the shape-outside property. While standard CSS margins push the entire rectangular box model of an element away from surrounding elements, shape-margin specifically adds an offset buffer to custom geometric shapes—such as circles, polygons, or alpha-mask contours—allowing text to flow naturally around non-rectangular contours with controlled breathing room.

How shape-margin Works

To use shape-margin, an element must meet two prerequisites: it must be floated using float: left or float: right, and it must have a defined shape-outside value.

When you define a shape using shape-outside (such as circle() or a polygon), browser layout engines recalculate the wrap path for surrounding text to match that shape instead of the default rectangular bounding box. Applying shape-margin extends that wrap path outward by a specified distance.

Syntax and Supported Values

The shape-margin property accepts non-negative length values and percentages:

.shaped-element {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  shape-margin: 20px;
}

• Length values (px, em, rem, etc.): Adds a fixed-distance buffer outward from the shape's perimeter.
• Percentages (%): Calculates the margin distance relative to the width of the element's CSS coordinate system (specifically the width of the shape's containing box).
• Zero (0): The default value, placing wrapped text directly against the defined shape edge.

Negative values are invalid for shape-margin and will be ignored by the browser.

Difference Between margin and shape-margin

The standard margin property applies spacing to the element's rectangular container box. If you apply margin-right: 20px to a floated circular shape, the browser simply shifts the entire rectangular footprint to the left, which often disrupts how text curves around the shape.

In contrast, shape-margin does not move the element or its box model. Instead, it expands the geometric contour of the shape-outside coordinate path outward in all directions equally. As a result, the adjacent text still follows the organic curve or angle of the shape, but with an even clearance gap along every point of the contour.

Boundary Limitations

The effect of shape-margin is bounded by the element's regular margin-box. If the value of shape-margin pushes the computed wrapping path beyond the element's outer margin edge, the shape boundary is clipped by that margin box, preventing text from being pushed outside the allocated layout bounds of the float.