CSS shape-margin Property - Playground Example

<!DOCTYPE html><html><head><style type="text/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;
}</style></head><body><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></body></html>