πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Flow Text Around Shapes in CSS

How to Flow Text Around Shapes in CSS

Ferenc Almasi β€’ 2020 December 01 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

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

Copied to clipboard! Playground
.cirlce {
    shape-outside: circle(50%);
    width: 100px;
    height: 100px;
}
shape-outside.css

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:

Copied to clipboard!
.shape-outside {
    shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
    shape-outside: path('path-rule');
}
shape-outside.css

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

Copied to clipboard!
.shape-outside {
    shape-outside: url(circle.png);
}
shape-outside.css
How to flow text around shapes in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.