How to wrap text around an image shape
Short answer
Make the image float with float and set the wrapping shape in shape-outside:
<style>
.round { float: left; width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
shape-outside: circle(50%); shape-margin: 12px; }
p { font: 14px/1.5 system-ui, sans-serif; }
</style>
<img class="round" src="/media/photo-200x200.jpg" alt="A flower">
<p>Flowers have been grown in gardens for thousands of years. Some are valued for their scent, some for their color, and some simply because they bloom when everything else is grey. A small bed of tulips or daisies can change the look of a whole yard. Text here follows the curve of the round photo instead of a straight edge.</p>border-radius rounds the image itself, while shape-outside: circle(50%) tells the text to flow around a circle. They are two different properties: one changes the look, the other the shape for the text. shape-margin sets the gap between the shape and the text.
A polygon
polygon() takes points in percent. It is handy to pass the same shape to clip-path to cut the image as well:
<style>
.tri { float: left; width: 140px; height: 140px; object-fit: cover;
clip-path: polygon(0 0, 100% 0, 0 100%); shape-outside: polygon(0 0, 100% 0, 0 100%); }
p { font: 14px/1.5 system-ui, sans-serif; }
</style>
<img class="tri" src="/media/photo-200x200.jpg" alt="A flower">
<p>The photo is cut into a triangle, and the lines of text get longer as they go down, following its slanted edge. This works for any shape you can describe with points: a diagonal, an arrow or a hexagon.</p>Along the image transparency
Instead of a shape you can pass a PNG with a transparent background: shape-outside: url(cat.png). The text flows around the opaque part. The image must come from the same site, otherwise the browser will not use it.
Common mistake
Setting shape-outside without float. The property works only on floating elements; on an ordinary or flex image it does nothing. The image also needs set dimensions — otherwise the shape has nothing to compute its percentages from.
Functions used in this recipe
- shape-outside — Sets the shape that text wraps around next to a floated element — a circle, a polygon or the outline of an image.
- float — Pushes an element to the left or right edge so that text flows around it.
- clip-path — Clips an element to a shape: only the part inside the shape stays visible.
- border-radius — Rounds the corners of an element.