Syntax
shape-outside
Setting a shape around which adjacent inline content should wrap.
Overview
| Class | Declarations |
|---|---|
shape-outside:`value` | shape-outside: `value`;
|
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: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(`…`);
|
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<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>