shape-outside

shape-outside

Let text wrap around a shape, not just a rectangle!

The property

shape-outside needs a FLOATED element (or one in a flex/grid) to work:

img {
  float: left;
  shape-outside: circle(50%);
  shape-outside: ellipse(50% 60% at 50% 50%);
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Circle around avatars

.avatar {
  float: left;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
}

Text hugs the circle!

shape-margin

Add breathing room between text and shape:

img {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 10px;
}

Using an image's alpha

shape-outside: url(shape.png) uses the image's transparent parts as the boundary.

TL;DR

• shape-outside wraps text around non-rectangular shapes.
• Pair with float (still the cleanest use).
• circle(), ellipse(), polygon().
• shape-margin spaces text away from the shape.