Shape-outside defines the contour around which inline content flows beside a floated element. It does not clip the element's own pixels; the float and its dimensions still participate in layout.
Make this comfortable
CSS shape-outside: let prose wrap around a floated decoration
When to use it
A long incident narrative begins beside a circular decorative case marker. Float the marker and give it a circular wrap contour so the text does not leave a rectangular gap. Keep the marker's content nonessential; the report must read correctly when CSS is removed or the float drops above the paragraph on a narrow screen. The sample sets an explicit size, float, and shape margin. Test short and long paragraphs, right-to-left text, and high zoom. Do not use a shaped float to position a key action or evidence image: text wrapping around it may make the sequence harder to follow. For ordinary two-column layout, grid is clearer and less sensitive to changing copy length.
.incident-note__marker { float: inline-start; inline-size: 4.5rem; aspect-ratio: 1; border-radius: 50%; shape-outside: circle(50%); shape-margin: .75rem; margin-inline-end: .5rem; }Cost and verification
The shape calculation is generally small, but repeated complex shapes can make layout and maintenance harder. The larger cost is readability: narrow lines around a large float can produce awkward word breaks. Check the actual production font and localized copy. Shape-outside is not a substitute for semantic figure markup or a caption. The floated box still affects layout and may need containment by its parent; inspect the next section to ensure it clears the float. A circle shaped marker is optional decoration, so the narrative must not rely on it to explain the incident.
Common Mistakes
- Do not expect shape-outside to clip the marker itself.
- Do not wrap core data or controls around an arbitrary contour.
- Do not omit an explicit float and size when defining the shape.
Connected lessons
css
reference
web