shape-outside
Setting a shape around which adjacent inline content should wrap.
Overview
| Class | Declarations |
|---|---|
shape-none | shape-outside: none;
|
shape-margin | shape-outside: margin-box;
|
shape-content | shape-outside: content-box;
|
shape-border | shape-outside: border-box;
|
shape-padding | shape-outside: padding-box;
|
shape-outside:<value> | shape-outside: <value>;
|
shape-outside:inset(<…>) | shape-outside: inset(<…>);
|
shape-outside:circle(<…>) | shape-outside: circle(<…>);
|
shape-outside:ellipse(<…>) | shape-outside: ellipse(<…>);
|
shape-outside:polygon(<…>) | shape-outside: polygon(<…>);
|
shape-outside:url(<…>) | shape-outside: url(<…>);
|
shape-outside:linear-gradient(<…>) | shape-outside: linear-gradient(<…>);
|
Examples
Wrap text around a circle
Shape-outside changes the area that adjacent inline content avoids around a float. Compare the same 120 × 120 SVG box with ordinary rectangular wrapping and a 48px circular shape.
<!-- Normal float · rectangular wrap --><article class="flow-root w:280px max-w:100% font-sm leading:24px text-body"> <svg id="target" role="img" aria-label="Blue circle" width="120" height="120" viewBox="0 0 120 120" class="float:left outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-none"> <circle cx="60" cy="60" r="48" /> </svg> <p class="m:0"> A clear layout leaves room for both artwork and words. Follow the first lines as they pass the blue shape. Their starting positions change with the available space. Below the float, the paragraph returns to its full width. The artwork keeps the same size throughout the comparison. </p></article><!-- Circle · text follows the curved boundary --><article class="flow-root w:280px max-w:100% font-sm leading:24px text-body"> <svg id="target" role="img" aria-label="Blue circle" width="120" height="120" viewBox="0 0 120 120" class="float:left outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-outside:circle(48px)|border-box"> <circle cx="60" cy="60" r="48" /> </svg> <p class="m:0"> A clear layout leaves room for both artwork and words. Follow the first lines as they pass the blue shape. Their starting positions change with the available space. Below the float, the paragraph returns to its full width. The artwork keeps the same size throughout the comparison. </p></article>Generated CSS
@layer utilities { .shape-outside\:circle\(48px\)\|border-box { shape-outside: circle(48px) border-box }}The outline marks the unchanged float box. The authored circle supplies its paint; shape-outside does not clip the artwork. The explicit border-box reference keeps the wrap geometry aligned with the SVG. Labels remain outside the flowing paragraph.
Use an inset shape
The inset removes 24px from both horizontal sides of the wrap area. The painted rectangle is authored at the same coordinates, so text can use the transparent strip at the right of the float.
<!-- No shape · wraps at the box edge --><article class="flow-root w:280px max-w:100% font-sm leading:24px text-body"> <svg id="target" role="img" aria-label="Blue rectangle" width="120" height="120" viewBox="0 0 120 120" class="float:left outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-none"> <rect x="24" y="0" width="72" height="120" /> </svg> <p class="m:0"> A clear layout leaves room for both artwork and words. Follow the first lines as they pass the blue shape. Their starting positions change with the available space. Below the float, the paragraph returns to its full width. The artwork keeps the same size throughout the comparison. </p></article><!-- Inset · wraps at the painted edge --><article class="flow-root w:280px max-w:100% font-sm leading:24px text-body"> <svg id="target" role="img" aria-label="Blue rectangle" width="120" height="120" viewBox="0 0 120 120" class="float:left outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-outside:inset(0|24px)|border-box"> <rect x="24" y="0" width="72" height="120" /> </svg> <p class="m:0"> A clear layout leaves room for both artwork and words. Follow the first lines as they pass the blue shape. Their starting positions change with the available space. Below the float, the paragraph returns to its full width. The artwork keeps the same size throughout the comparison. </p></article>Text still wraps only on the right of this left float. A smaller shape changes line positions, not the float’s position, dimensions or painted contents.
Remove shape wrapping
Open print preview to replace the circular wrap area with the ordinary float margin box. The SVG remains floated and its painted circle stays visible.
<!-- Circular on screen · rectangular in print --><article class="flow-root w:280px max-w:100% font-sm leading:24px text-body"> <svg id="target" role="img" aria-label="Blue circle" width="120" height="120" viewBox="0 0 120 120" class="float:left outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-outside:circle(48px)|border-box shape-none@print"> <circle cx="60" cy="60" r="48" /> </svg> <p class="m:0"> A clear layout leaves room for both artwork and words. Follow the first lines as they pass the blue shape. Their starting positions change with the available space. Below the float, the paragraph returns to its full width. The artwork keeps the same size throughout the comparison. </p></article>shape-none resets shape-outside. It does not remove the float or change the image to a block in normal flow.
Apply conditionally
Widen the real preview viewport to sm to wrap around the circle. Print uses the normal float box. The article keeps its explicit reading width so the condition isolates shape behavior.
<!-- Rectangle → circle at sm --><article class="flow-root w:280px max-w:100% font-sm leading:24px text-body"> <svg id="target" role="img" aria-label="Blue circle" width="120" height="120" viewBox="0 0 120 120" class="float:left outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-none shape-none@print shape-outside:circle(48px)|border-box@screen@sm"> <circle cx="60" cy="60" r="48" /> </svg> <p class="m:0"> A clear layout leaves room for both artwork and words. Follow the first lines as they pass the blue shape. Their starting positions change with the available space. Below the float, the paragraph returns to its full width. The artwork keeps the same size throughout the comparison. </p></article>The example includes the required float and adjacent inline content. Applying shape-outside to an ordinary non-floated image does not produce this text wrap.