Syntax
shape-outside
Setting a shape around which adjacent inline content should wrap.
Overview
| 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>