Shapes & Masks

shape-outside

Setting a shape around which adjacent inline content should wrap.

Class	Declarations
`shape-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-outside:<value>`	`shape-outside: <value>;`
`shape-outside:inset(<…>)`	`shape-outside: inset(<…>);`
`shape-outside:circle(<…>)`	`shape-outside: circle(<…>);`
`shape-outside:ellipse(<…>)`	`shape-outside: ellipse(<…>);`
`shape-outside:polygon(<…>)`	`shape-outside: polygon(<…>);`
`shape-outside:url(<…>)`	`shape-outside: url(<…>);`
`shape-outside:linear-gradient(<…>)`	`shape-outside: linear-gradient(<…>);`

Examples

Use shape-outside:circle(*) on a floated element to let inline content wrap around a circular shape.

<img class="float:left shape-outside:circle(40px) shape-margin:1rem" src="/images/avatar.jpg" alt="Avatar">

Generated CSS

@layer utilities {    .shape-outside\:circle\(40px\) {        shape-outside: circle(40px)    }}

Use shape-outside:inset(*) when text should wrap around a rectangular inset.

<img class="float:left shape-outside:inset(0|20px)" src="/images/photo.jpg" alt="Photo">

Use shape-none when a responsive or print context should use the normal float box.

<img class="float:left shape-outside:circle(40px) shape-none@print" src="/images/avatar.jpg" alt="Avatar">

Apply styles based on different states using selectors and conditional queries.

<img class="shape-outside:circle(40px):hover shape-outside:inset(0|20px)@sm shape-none@print" src="/images/avatar.jpg" alt="">

Setting a margin for a CSS shape.

Applying an animation between styles.