CSS Shape-outside

The CSS shape-outside property allows text to wrap around an element in different shapes instead of just a rectangle, such as circles, ellipses, or polygons. This is particularly useful for creative layouts and visually striking designs.

Using a circular shape

With the circle() function, we can easily assign a circular shape to a floating element, around which text will automatically wrap. The clip-path property is often used alongside it to visually display the shape.

This example shows how text wraps around a circular image.

Using a polygon shape

With the polygon() function, we can define custom shapes by specifying coordinates. This allows text to flow around unusual, unique shapes.

In this example, text flows around a polygonal shape defined with the polygon() function.

Tips for using shape-outside

Some advice for effective use of the shape-outside property:

• Always use clip-path alongside shape-outside to keep the visual shape and text flow aligned.
• Float is required for shape-outside to work, so the element must be set to float.
• Experiment with different shapes (circle, ellipse, polygon) to achieve varied and visually appealing layouts.