Shapeoutside

Shape-outside is a CSS property that controls how inline content wraps around a floated element. It is part of the CSS Shapes module and enables non-rectangular text flow, allowing designers to create more visually interesting layouts around images and other media.

The property accepts a basic value of none or a shape specification. A shape can be a circle(), ellipse(), inset(), or polygon(), each with optional size and position parameters such as circle(50px at 60px 60px). In some implementations, shape-outside can also reference an external image using a url(...) to derive the wrap region from the image, typically via its alpha channel, where supported by the browser.

How shape-outside works: it is applied to a floated element (for example, an image floated left or right). The surrounding text flows around the defined shape within the element’s containing block. A separate shape-margin property can be used to add space between the shape boundary and the text, improving readability and appearance.

Practical use includes creating circular or irregular text wraps around photos, icons, or decorative elements, producing layouts that resemble magazine or news-site designs. The property works in conjunction with standard float behavior and other layout techniques, but its support can vary by browser and version, so testing across environments is advised.

Example: shape-outside: circle(50px at 60px 60px); or shape-outside: polygon(0 0, 100% 0, 50% 100%); The exact syntax depends on the chosen shape and browser capabilities.