Shape

Shape Outside

Style syntax for 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 in different states using selectors, media queries, etc.

<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 [sr-only]

Conditionally apply