The CSS shape-outside property defines the shape around which inline content flows. It works only on a floated element, whose position lets text flow beside it instead of following a straight rectangular edge. section 14.4
Listing 14.15 A circle clip path and shape
.poem-image {
float: left;
margin-right: 15px;
--shape: circle(50%);
clip-path: var(--shape);
shape-outside: var(--shape);
}
.poem-image > img {
display: block;
height: 350px;
width: 350px;
object-fit: cover;
}
A reusable circle pattern shares one custom property between clip-path and shape-outside, keeping the visible image and text boundary aligned. section 14.4.2
Use shape-outside to coordinate visible contours, wrapping space, and layout behavior:
- Pair it with clip-path, mask, or border-radius when the element’s visible appearance should match the text-wrapping contour. section 14.4 section 14.5
- Use circle(), ellipse(), polygon(), inset(), or a reference box such as margin-box; path() is specified but unsupported in browsers described here. section 14.4.2
- Add shape-margin when wrapped text needs space along the contour, remembering that it cannot extend beyond the floated element’s margin box. section 14.4.2
- Use a gradient as the shared mask and shape when the desired contour is diagonal or follows an image threshold. section 14.4.2
Circular image with matching text flow
Float the image container, define --shape: circle(50%), and assign that value to both clip-path and shape-outside. Add a margin or shape-margin to separate the text from the circle. section 14.4.2
