In CSS, what does shape-outside do, and what must be true of an element for it to have any effect?
answer
- only floats reshape the wrap
- circle, ellipse, inset, polygon, image alpha
- shape-margin follows the curve
- does not clip what you see
- pair with clip-path to match
basics
~20 sshape-outside changes the contour that inline content wraps around, so text can follow a circle, polygon, or image alpha instead of a rectangle. It only applies to floated elements, and it changes the wrap, not the element's own painted shape.
solid answer
~40 s`shape-outside` replaces the rectangular float boundary that line boxes avoid with a shape you define — `circle()`, `ellipse()`, `inset()`, `polygon()`, or an image or gradient whose alpha channel supplies the outline. The hard requirement is that the element must be **floated**; on anything else the declaration is inert, because wrapping only happens around floats in the first place. It is purely a wrapping instruction: the element itself still paints as its normal rectangle, so pairing it with `clip-path` using the same shape is how you make the visible box match the wrap. `shape-margin` adds breathing room between the shape and the text, and `shape-image-threshold` sets the alpha cutoff when the shape comes from an image. Support has been broad across browsers since 2018.
code
css · 8 lines.cutout {
float: right;
width: 14rem;
height: 14rem;
shape-outside: circle(50%);
clip-path: circle(50%);
shape-margin: 0.75rem;
}go deeper
Know that shape-outside makes text wrap around a non-rectangular contour, and that the element has to be floated for it to do anything.
Name the value types — basic shapes and image alpha — and explain that it changes only the wrapping contour, so clip-path is what makes the visible box match.
Judge when a shaped wrap is worth the maintenance cost against fluid text, and know the failure modes to check first: no float, no resolved size, or a cross-origin image shape.
Decide whether editorial shaped-wrap layouts belong in the design system at all, given they depend on a single float-only property and degrade to a rectangular wrap wherever the shape cannot resolve.
## The problem it solves By default, line boxes avoid a float's rectangular margin box. If the float is a circular avatar or a diagonal cut-out, the text still wraps around an invisible rectangle and the design looks wrong. `shape-outside` lets you specify the contour the lines should avoid instead. ```css .avatar { float: left; width: 12rem; height: 12rem; border-radius: 50%; shape-outside: circle(50%); shape-margin: 1rem; } ``` ## Values - **Basic shapes** — `circle()`, `ellipse()`, `inset()`, `polygon()`. These are resolved against a reference box you can name alongside the shape: `shape-outside: circle(50%) border-box`, with `margin-box` as the default. - **An image or gradient** — `shape-outside: url(leaf.png)` uses the image's alpha channel: pixels above the threshold are inside the shape. The image must be same-origin or CORS-permitted, or the declaration is ignored. - **`none`** — the default, meaning the ordinary margin box is used. Two companions: `shape-margin` offsets the whole shape outward, giving a gutter that follows the curve rather than a straight margin; `shape-image-threshold` picks the alpha value that counts as "inside" when the shape comes from an image. ## The float requirement `shape-outside` applies to floats only. Setting it on a static, relatively positioned, absolutely positioned, flex, or grid box does nothing at all — not because of a browser limitation but because nothing wraps around those boxes for the shape to modify. This is the single most common quiz point about the property, and it is a good illustration of why float is not going away: shaped text wrap is float-exclusive territory. ## Wrap shape versus painted shape `shape-outside` never changes what the element looks like. A square image with `shape-outside: circle(50%)` still paints as a square while text hugs a circle — which reads as a bug. The visual side is a separate declaration: - `border-radius` for simple rounding, or - `clip-path` with the *same* shape function, which is how you keep the two in sync. A useful mental split: `clip-path` shapes what you see, `shape-outside` shapes what the text avoids. ## Debugging Browser devtools expose a shape editor on elements with `shape-outside`, letting you drag polygon vertices and see the wrap update. If nothing happens when you set the property, check in order: is the element floated, does it have a resolvable size, and — for image shapes — is the image reachable under CORS. ## Where it is worth using Editorial layouts, magazine-style article pages, and marketing pages where a cut-out product photo should have body copy hugging its silhouette. It is a differentiator in an interview rather than a screener: knowing it exists, knowing it needs a float, and knowing it does not clip the element is the whole expected answer.
- What is the difference between shape-outside and clip-path on the same element?`clip-path` changes what is painted — pixels outside the path are not drawn. `shape-outside` changes only the contour that surrounding line boxes avoid, and requires the element to be floated. They are independent, so a common recipe is to give both the same shape function; using one alone leaves either an unclipped square that text hugs oddly, or a clipped shape that text still wraps rectangularly around.
- Why does shape-outside sometimes have no effect at all?Most often the element is not floated — the property applies to floats only. Other causes: the element has no resolved size for a percentage shape to resolve against, or the shape comes from an image that is cross-origin without CORS permission, in which case the declaration is ignored and the plain margin box is used.
shape-outside is the fence the text refuses to cross; clip-path is the paint on the object. Move one and the other stays where it was.
saying these in an interview costs you the question
- Thinks shape-outside works on any positioned element
- Expects shape-outside to clip the element's rendering
- Confuses shape-margin with the element's normal margin
- Believes flex or grid items can carry a wrap shape