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.

Overview [sr-only]

shape-outside:valueshape-outside: value
shape-outside:noneshape-outside: none
shape:marginshape-outside: margin-box
shape:contentshape-outside: content-box
shape:bordershape-outside: border-box
shape:paddingshape-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 Margin

Style syntax for setting a margin for a CSS shape.

Aspect Ratio

Style syntax for setting the ratio for the box.

MIT License © Aoyue Design LLC.