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.

css shape-outside example

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

[codepen_embed height=“350” theme_id=“23550” slug_hash=“WNGJwae” default_tab=“result” user=“joshwcomeau”]See the Pen CSS shape-outside ✨ by Joshua Comeau (@joshwcomeau) on CodePen.[/codepen_embed]

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!