As we mentioned before, all HTML elements are represented as square or rectangular boxes. This means that all inline content like text wraps around elements' margin boxes. But what if you have a round picture? For example, a photo of the Moon. And you want the surrounding text to wrap around the shape of the Moon.

The shape-outside property defines the element's shape, allowing us to wrap text around complex objects rather than simple boxes. You can use simple shapes like circles or ellipses or more complex polygons.^[1]