CSS shape-outside Property

The shape-outside property controls the contour that inline content (text and inline-level boxes) flows around when it is applied to a floated element. It does not change the floated element’s own box, positioning, hit-testing area, stacking context, or how that element paints; its role is strictly to define the outline used when computing the float’s wrap area. Because it only affects the wrapping geometry, it must be used on an element that participates as a float — see float for how an element becomes a float.

Unlike a simple rectangular wrap determined by the element’s margin box, the property can specify more complex contours — geometric shapes, polygonal paths, or silhouettes derived from a visual resource — so nearby inline content conforms to that contour instead of the rectangle. The computed shape is evaluated relative to the float’s margin box and becomes the basis for line-breaking and inline box placement adjacent to the float. You can control spacing between the shape and surrounding content independently, for which the related shape-margin property is used to increase the gap around the defined contour without altering the contour itself.

It’s important to distinguish the wrapping contour from visual clipping or masking: a clipping or mask operation alters what parts of an element are painted and can affect hit-testing, whereas the wrapping contour solely affects the flow of inline content. For that distinction see clip-path. In practice, developers often combine wrapping contours with visual clipping or images — for example using an image’s nontransparent silhouette to determine the wrap — but remember that wrapping behavior depends on the float being present and the float’s box model; if the float isn’t participating in layout the shape has no effect.

When using contours in production layouts, watch for responsive and typographic interactions: different viewport widths, font sizes, line-heights, and column configurations change how many lines will sit beside the float and can reveal awkward gaps or overlaps if the contour and surrounding spacing aren’t tuned. Also keep accessibility and reading order in mind: shaping is a presentational device for flow, not a way to reorder content, and overly decorative shapes can make adjacent text harder to scan.