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!