Make your text wrap around images perfectly.
By default, text wraps around a boring rectangle. But what if you could make it hug the actual shape of the image?
You can. With just one CSS property:
shape-outside: url(your-img.png);
Add a float and a bit of margin with shape-margin,
and your layout feels instantly more refined.
No JavaScript. No layout hacks. Just native CSS support and it’s supported in over 95% of browsers.
Use it with transparent PNGs, SVGs, or even basic shapes like circle() or polygon().
Ideal for editorial layouts, landing pages, or any design that needs more personality.
Checkout the codepen: https://codepen.io/theosoti/pen/ogjjged
To learn more tips about CSS, make sure to join my newsletter below ❤️