CSS shape-margin Property

Description

The shape-margin property controls an extra offset applied to a geometric shape used for wrapping inline content around an element. Instead of changing the element’s own box, it expands or contracts the shape that the layout engine uses to decide where text and other inline content are allowed to flow. This makes it possible to create a breathing room or an exclusion zone around irregular shapes (for example, images with non-rectangular silhouettes) without altering the element’s physical margins or position.

Commonly used in conjunction with shape-outside, shape-margin adjusts the effective boundary used for text wrapping so designers can tune spacing between the float’s visual outline and surrounding text. Because it operates on the wrapping shape rather than the element box, it is especially useful when you want consistent visual padding around a clipped or irregular image without changing layout metrics that other elements depend on. It also pairs well with clipping or masking techniques, for example when you combine it with clip-path to create a padded exclusion area around a clipped region.

Practical scenarios include keeping captions or labels from touching the edges of an irregular graphic, compensating for anti-aliased edges or drop shadows so wrapped text doesn’t appear too close, and fine-tuning the flow of multi-column text around floated artwork or decorative shapes. Because shape-margin only alters the wrapping shape, it won’t shift the float itself — if you need to move the element’s box you should use normal box-model properties like margin or positioning. When used alongside traditional floats (see float), it gives designers precise control over text flow without introducing layout side effects that direct margin changes can cause.

Be mindful that large offsets can significantly change line breaks and the overall flow of text; increasing the shape gap may force more wrapping or create larger empty areas in columns. Also, because it modifies the logical shape used for wrapping rather than content sizing, interactions with other layout features (such as float clearance behavior or text alignment) can produce subtle differences across complex layouts — so test visually and adjust the offset to achieve the intended balance between readability and design.

Definition

Initial value: 0
Applies to: Floats
Inherited: No
Computed value: as specified, but with relative lengths converted into absolute lengths
Animatable: Yes
JavaScript syntax: object.style.shapeMargin

Syntax

shape-margin = <length-percentage>

Values

<length-percentage>Sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.

Example

HTML

<div class="wrap">

    <h2>shape-margin example</h2>

    <div class="float-shape" aria-hidden="true"></div>

    <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.

        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis

        sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

    </p>

    <p>

        Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque

        volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia

        nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

    </p>

</div>

CSS

/* Container and typography */
body {
    background: #f4f6f8;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #222;
}

.wrap {
    max-width: 880px;
    margin: 32px auto;
    background: #ffffff;
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}

h2 {
    margin: 0 0 14px 0;
    font-size: 20px;
    color: #111827;
}

/* The floated element defines the shape for text wrapping. */
.float-shape {
    float: left;
    width: 160px;
    height: 160px;
    margin: 12px 22px 12px 0; /* visual spacing on the layout box */

    /* Make the element visually circular */
    background: radial-gradient(circle at 35% 30%, #6dd3b0 0 45%, #4aa3e0 45% 100%);
    -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);

    /* Define the wrapping shape and the shape-margin (gap between shape and text) */
    -webkit-shape-outside: circle(50% at 50% 50%);
            shape-outside: circle(50% at 50% 50%);
    -webkit-shape-margin: 20px;
            shape-margin: 20px; /* this creates extra breathing room between the text and the circular shape */

    /* Keep the element visually present but not selectable as content for screen readers */
    overflow: hidden;
}

p {
    margin: 0 0 16px 0;
    line-height: 1.65;
}

/* Clear floats for the container if more content follows */
.wrap::after {
    content: "";
    display: table;
    clear: both;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS shape-margin property. Hover over a browser icon to see the version that first introduced support for this CSS property.