Skip to content

Shape Outside & Text Flow

When to Use

When a client wants text to wrap around an image, circle, or custom shape instead of flowing in a rectangular box — the "magazine layout" effect.

Decision

Client asks for... Use... Why
Text wrapping around a circular image shape-outside: circle() + float Text flows around the circle
Text wrapping around an irregularly shaped image shape-outside: url(image.png) Uses image alpha channel
Text avoiding a polygon area shape-outside: polygon() Custom shape exclusion
Pull quote with text wrap shape-outside: ellipse() + float Elegant wrap around pull quote
Text indent from shape edge shape-margin Adds breathing room

Pattern: Circular Image with Text Wrap

.article-image--circular {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  shape-margin: 1rem;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
  object-fit: cover;
}

Pattern: Custom Polygon Text Wrap

.pull-quote {
  float: right;
  width: 300px;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  shape-margin: 1.5rem;
  padding: 2rem;
  margin-left: 2rem;
}

Pattern: Image Alpha Channel Wrap

/* Text wraps around transparent areas of the image */
.shaped-image {
  float: left;
  shape-outside: url('person-cutout.png');
  shape-image-threshold: 0.5; /* Alpha threshold for shape edge */
  shape-margin: 12px;
}

Requirement: shape-outside only works on floated elements. It does not work with flexbox, grid, or absolute positioning.

Browser support: All browsers (Baseline 2017). Fully production-ready.

Common Mistakes

  • Forgetting float — shape-outside has no effect without it
  • Using with flexbox/grid children — only works on floated elements
  • Missing shape-margin — text touching the shape edge looks cramped; always add spacing
  • High-res images for shape-outside URL — use a small, low-res alpha mask; the shape calculation is expensive on large images

See Also