CSS Shapes

CSS Shapes, via the shape-outside property, let inline content (text) wrap around a non-rectangular shape instead of the usual rectangular box. Normally, when text wraps around a floated image, it follows the image's bounding box — even if the image itself is a circular avatar or an irregular illustration, the text still stops at an invisible rectangle around it. shape-outside tells the text to instead follow a circle, polygon, or the actual opaque pixels of an image.

The classic use case — text around a circular avatar

CSS

.profile-photo {
  float: left;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-right: 16px;

  /* Without this, text would wrap around the square bounding
     box, leaving visible gaps at the circle's rounded corners */
  shape-outside: circle(50%);
}

Paragraph text after this floated image now curves inward to hug the circle's actual edge, instead of stopping at a straight vertical line at the image's right edge. The result reads like a magazine layout, with text flowing naturally around a portrait photo.

Polygon shapes for irregular wrapping

CSS

.diamond-graphic {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 20px;

  shape-outside: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );
  /* Text now flows around a diamond, following the polygon's
     edges rather than the element's rectangular box */
}

Shaping from an image's actual alpha channel

CSS

.leaf-illustration {
  float: right;
  width: 240px;
  shape-outside: url('/images/leaf-silhouette.png');
  shape-image-threshold: 0.5; /* alpha cutoff for what counts as "shape" */
  shape-margin: 12px;         /* gap between text and the shape's edge */
}

Here the wrap follows the actual opaque silhouette of the PNG (subject to shape-image-threshold's alpha cutoff), so text curves around the leaf's organic outline rather than any geometric approximation of it.

A niche but genuinely useful feature

CSS Shapes is used far less often than clip-path — most layouts don't need text to hug a non-rectangular shape. But for magazine-style editorial layouts, pull quotes, or decorative illustrations embedded in body copy, it's the only CSS-native way to get that effect, and it's worth knowing it exists rather than reaching for absolute positioning hacks.

shape-outside changes how surrounding text FLOWS around an element. clip-path instead cuts the element's own box into a shape, hiding whatever's outside it — see [clip-path](/css/clip-path) for that related but distinct capability.