![How to Flow Text Around Shapes in CSS](https://allma.si/blog/wp-content/uploads/2020/11/flow-text-around-shapes-in-css.png)
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:
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);
}
![How to flow text around shapes in CSS](https://allma.si/blog/wp-content/uploads/2020/11/flow-text-around-shapes-in-css.png)
![10 Best Practices for Quickly Improving Your CSS](https://miro.medium.com/max/700/1*m7oyUcMoJsW5wyzGfh6ydA.png)
Resources:
![Mentoring](/assets/img/mentoring.png)
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
![CSS - The Complete Guide (including Flexbox, Grid and Sass)](https://img-c.udemycdn.com/course/480x270/1561458_7f3b_2.jpg)
CSS - The Complete Guide (including Flexbox, Grid and Sass)
![The HTML & CSS Bootcamp](https://img-c.udemycdn.com/course/480x270/5088684_a587_7.jpg)
The HTML & CSS Bootcamp
![The Creative HTML5 & CSS3 Course](https://img-c.udemycdn.com/course/480x270/3014898_c2e1_3.jpg)