CSS Shapes define geometric boundaries that let inline content flow around a floated element instead of following only its rectangular box. They make images, typography, and editorial layouts more visually expressive while preserving the surrounding HTML structure. section 7.0 section 7.3.1
The main property is shape-outside. For a circular image, shape-outside: circle(50%) creates a centered circular flow boundary; omitted position defaults to the image center, while an omitted radius defaults to closest-side. The element must be floated for adjacent inline content to follow the shape. section 7.3.1 section 7.5
Listing 7.6 shape-outside
img.compass {
aspect-ratio: 1; #1
float: right; #2
shape-outside: circle(50%); #3
}
A minimal rule combines a square aspect ratio, float, and circular shape boundary on the compass image. section 7.3.1
Common shape definitions and finishing techniques include:
- Use circles, ellipses, polygons, image alpha channels, box-model values, or linear gradients as shape sources; path() is specified but was not implemented in browsers at the stated time. section 7.3.1
- Add shape-margin when text sits too close to the boundary, especially around protruding image details. section 7.3.2 section 7.5
- Pair shape-outside with clip-path when the image itself should display the same visible geometry; border-radius offers another way to make a circle. section 7.3.2 section 7.3.1
A circular compass
Float a 175-pixel compass to the right, apply shape-outside: circle(50%), and add clip-path: circle(50%) with a left margin. The paragraph follows the circular image while remaining clear of its arrows. section 7.3.2 section 7.3.1
