shape-outside
Sets the shape that text wraps around next to a floated element — a circle, a polygon or the outline of an image.
Syntax
shape-outside: circle(50%);Values
| Parameter | Type | Description |
|---|---|---|
| circle(), ellipse(), polygon() | shape | A geometric shape, the same functions as in `clip-path`. |
| margin-box | keyword | The default: the rectangular box of the element. |
| url() | image | An image with transparency: text follows its opaque part. |
Examples
Text flows around a round photo:
<style>
img {
float: left; border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 12px;
}
</style>
<img src="/media/photo-200x200.jpg" alt="A photo" width="140" height="140">
<p>The text follows the circle instead of the square box of the image. Lines near the middle of the photo are shorter, and lines near the top and the bottom come closer to it. This looks like a printed magazine layout.</p>Notes
Works only on elements with float. The shape changes how text flows, not how the element looks — to make the image itself round, add border-radius or clip-path. shape-margin adds space between the shape and the text.
See also
- 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.
Related recipes
In the tutorial
- Floats — How float works, wrapping text around an image, clear and display: flow-root, and why columns are built with flexbox and grid today.