Shape-outside
The CSS shape-outside property defines the geometric shape around which inline content flows beside a floated element.
Tiny CSS Projects
The CSS shape-outside property defines the geometric shape around which inline content may flow beside a floated element.
- How it is used
- Makes adjacent inline content follow a chosen contour beside a floated image instead of its rectangular box.
- How deep it goes
- Works through circle(), rounded box contours, and image transparency, including defaults and a file-serving pitfall; defers path() because of browser support.
- Examples
- Uses a right-floated circular compass and a left-floated transparent SVG illustration to demonstrate different wrapping contours.
- What you can do after
- Build it from scratch: wrap text around circular and transparent floated images using circle(), margin-box, or url().
CSS in Depth, Second Edition
The CSS shape-outside property defines the shape around which inline content may flow, typically for a floated element.
- How it is used
- Shapes floated elements so inline content follows custom visual contours instead of a straight rectangular edge.
- How deep it goes
- Explains float dependency, shape values, shared contours, spacing limits, gradients, and unsupported path() without descending into browser internals.
- Examples
- Demonstrates circular eagle imagery, border-radius circles, diagonal gradients, and opacity-threshold shapes for wrapped text.
- What you can do after
- Apply it via CSS to make inline text follow circles, polygons, gradients, masks, or other supported shapes around floated elements.
Read how CSS in Depth, Second Edition explains shape-outside →
Related concepts
- float propertyuses · The CSS float property positions an element toward one side of its containing block and allows surrounding content to flow around it.
- circle()uses · The CSS circle() function defines a circular basic shape using a radius and optionally a center position.
- CSS Shapesuses · CSS Shapes is a CSS feature for defining geometric shapes that control how inline content flows around an element.
- clip-pathuses · A clipping path is a geometric region that determines which portions of rendered content remain visible.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.