Syntax

Shape Outside

Setting a shape around which adjacent inline content should wrap.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`shape-outside:value`	`shape-outside: value;`
`shape-outside:none`	`shape-outside: none;`
`shape:margin`	`shape-outside: margin-box;`
`shape:content`	`shape-outside: content-box;`
`shape:border`	`shape-outside: border-box;`
`shape:padding`	`shape-outside: padding-box;`
`shape:inset(…)`	`shape-outside: inset(…);`
`shape:circle(…)`	`shape-outside: circle(…);`
`shape:ellipse(…)`	`shape-outside: ellipse(…);`
`shape:polygon(…)`	`shape-outside: polygon(…);`
`shape:url(…)`	`shape-outside: url(…);`
`shape:linear-gradient(…)`	`shape-outside: linear-gradient(…);`

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="shape-outside:inset(0|20px):hover shape-outside:inset(0|20px)@sm shape-outside:inset(0|20px)@dark shape-outside:inset(0|20px)@print">…</div>

Shape Outside

Overview

Conditionally apply