A floated image normally makes nearby text wrap around its rectangular box. Add `shape-outside` when the text should follow a contour instead. For a square compass image floated right, `circle(50%)` makes the text follow a circular outline. The optional center position defaults to the image’s center; without a radius, `circle()` uses `closest-side`. section 7.3.1
Listing 7.6 shape-outside
img.compass {
aspect-ratio: 1; #1
float: right; #2
shape-outside: circle(50%); #3
}
The compass CSS keeps the image square, floats it right, and gives adjacent text a circular shape to follow. section 7.3.1
The wrapping shape does not have to be specified with `circle()`. If `border-radius: 50%` already makes the image circular, use `shape-outside: margin-box` to follow that contour while accounting for its margin. Other box choices are `border-box`, `padding-box`, and `content-box`. Unlike this rounded-image approach, `circle()` alone does not crop the image; `clip-path` can handle that visual step. section 7.3.3
Listing 7.9 Adding border-radius and shape-outside
img.compass {
aspect-ratio: 1;
float: right;
margin-left: 1rem;
border-radius: 50%;
shape-outside: margin-box;
}
This alternative combines a right float, spacing, a circular image, and a margin-aware wrapping shape. section 7.3.3
Wrap text around a transparent illustration
Float the SVG illustration left and set `shape-outside: url("img/dog.svg")`. The browser uses the image’s transparency to establish the outline. Serve the file through a server rather than opening the page directly from the file system so the browser can fetch it. For partly transparent edges, `shape-image-threshold` adjusts the cutoff. Although `path()` could describe an outline, it was not fully implemented in browsers at the time described; an image URL or an approximate polygon was the practical alternative. section 7.4.2 section 7.4.1
