CSS shape-outside example to wrap text around image

CSS shape-outside is that CSS property that helps in wrapping text around a picture or a shape etc.

Text in news papers wrapped around the pictures is a good example of what can be achieved using css shape-outside.

We can also find similar functionality in Microsoft word – Wrap text around the picture – Wrap text around a picture in Word

Here’s a simple yet clean example of how to use css shape-outside property

See the Pen CSS shape-outside ✨ by Joshua Comeau (@joshwcomeau) on CodePen.23550

Things to note about css shape-aside property

1. Supports wrapping around both images and shapes
2. circle(), ellipse(), inset(), polygon() and url() are supported
3. It can wrap text only around elements which have float property set
4. shape-image-threshold property can be used to set transparency threshold. values between 0 to 1 are supported. For example: If we set it to 0.5, then all the pixels of the given image with transparency of 50% or more will be considered for creating the shape.

Cheers!

• Author
• Recent Posts

Ranjith kumar

A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.

Latest posts by Ranjith kumar (see all)

• Flutter lookup failed in @fields error (solved) - July 14, 2023
• Free open source alternative to Notion along with AI - July 13, 2023
• Threads API for developers for programmatic access - July 12, 2023