Shapes & Masks
shape-margin
Setting a margin for a CSS shape.
Overview
| Class | Declarations |
|---|---|
shape-margin:<size> | shape-margin: <size>;
|
Examples
Add space around a shape
Shape-margin expands the shape’s wrap boundary without resizing its paint. Both circles have a 40px radius inside a 120 × 120 float; compare no shape margin with the 16px md token.
Add space around a shape
The same painted circle and ordinary margins are preserved. Shape-margin expands the wrap boundary within the float’s margin box.
<!-- No shape margin · text near the circle --><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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-margin:0 shape-outside:circle(40px)|border-box"> <circle cx="60" cy="60" r="40" /> </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><!-- Margin md · expanded wrap 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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-margin-md shape-outside:circle(40px)|border-box"> <circle cx="60" cy="60" r="40" /> </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 theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .shape-margin-md { shape-margin: var(--spacing-md) }}The SVG and its normal 32px right/bottom margins stay unchanged. The border-box reference keeps the circle centered in the SVG. Shape-margin adds distance around that circle rather than ordinary spacing around the rectangular element.
Reserve room for a larger shape margin
Compare 16px and 32px shape margins while preserving the artwork. The larger wrap boundary needs room inside the float’s margin box, so both examples explicitly reserve mr-xl mb-xl.
Reserve room for a larger shape margin
The same painted circle and ordinary margins are preserved. Shape-margin expands the wrap boundary within the float’s margin box.
<!-- Margin md · 16px around the circle --><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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-margin-md shape-outside:circle(40px)|border-box"> <circle cx="60" cy="60" r="40" /> </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><!-- Margin xl · 32px around the circle --><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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-margin-xl shape-outside:circle(40px)|border-box"> <circle cx="60" cy="60" r="40" /> </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>A shape is clipped to the float’s margin box. Increasing shape-margin alone cannot extend wrapping beyond that box. Keep enough reading width; a large margin in a narrow column can leave very short lines.
Pair with shape outside
Shape-margin needs a shape on a float. Compare the same 16px value with shape-none and an explicit circle.
Pair with shape outside
The same painted circle and ordinary margins are preserved. Shape-margin expands the wrap boundary within the float’s margin box.
<!-- No shape · ordinary float margin box --><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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-none shape-margin-md"> <circle cx="60" cy="60" r="40" /> </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 · shape margin changes wrapping --><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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-margin-md shape-outside:circle(40px)|border-box"> <circle cx="60" cy="60" r="40" /> </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 first example keeps normal rectangular float wrapping. The second expands the circle’s boundary; transparent corners remain available for inline content. Neither example changes the SVG’s painted radius.
Apply conditionally
Widen to sm to increase the shape margin from md to xl. Print uses no additional shape margin. The circle and ordinary float margins stay fixed.
Apply conditionally
The same painted circle and ordinary margins are preserved. Shape-margin expands the wrap boundary within the float’s margin box.
<!-- Margin md → xl 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 mb-xl mr-xl outline:1px|solid|var(--color-line-muted) fill-blue-60 shape-margin-md shape-outside:circle(40px)|border-box shape-margin:0@print shape-margin-xl@screen@sm"> <circle cx="60" cy="60" r="40" /> </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 native viewport query changes actual line wrapping. The labels and live values are outside the float context and cannot become part of its paragraph.