How to Flow Text Around Shapes in CSS

Use the shape-outside property in CSS to flow text around elements. You can also use a polygon for more complex shapes:

.cirlce {
    shape-outside: circle(50%);
    width: 100px;
    height: 100px;
}

In the example above, this will create a circle to wrap around the text. By default, text is wrapped around its margin box. With shape-outside, you can define custom objects to wrap around. To create more complex objects, you can define a polygon or a path:

.shape-outside {
    shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
    shape-outside: path('path-rule');
}

You can also provide a URL for an image to be used. Make sure it is a png.

.shape-outside {
    shape-outside: url(circle.png);
}

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The shape-outside property in CSS