Wrap text around any image or shape that you want with shape-outside and shape-margin

This is great!!!! Thanks!

For this to work, I think the image has to be the first child. I was working with a design that required the image to be second child (that is after the text) and wasn't working. Until I moved the image before the text. Then gave my image "float:right;" style. If anyone has an alternative workaround, please help. DISCLAIMER; I am not really good with floats.

Great video, love the t shirt.

Hello Kevin. Your video is really helpful. I have managed to use the "shape-outside: circle ();" command in my CSS file on Notepad. However, when I used the "shape-outside: url();" command, nothing changed, that is, my text is still not wrapping around my irregular image. Any suggestions?

THANK YOU!

There's a big issue. How does this work witih a figure element (I need figcaptions) ? It doesn't... shape-outside only applies to img

struggling for this thing for one day. Thanks a lot. You made my day.😇

Awesome !

Super useful! Thank you!

I stumbled across this after pondering how to do something similar with images

Can you only do this with image elements or could you use the shape features to wrap around, say a headline?

Why you did not get rid of 'float:left'?

Thank you very much sir I am a child and you really helped me

Just wow.. and so well explained! Thank you.

If I had watched this when I woke up this morning, I would have saved myself 10 hours of rage and I'd still have a 2 monitor setup.

This has definitely made my portfolio better looking, thank you so much!

Can't seem to get the shape-outside: url('path'); to work -- it still wraps like an old school float. Help....

since the latest ui update firefox became an amazing browser again, not only for development purposes

Hi Kevin, Does it only work with webp images? I'm using a png with a transparent bkgd but it's not working. Thanks!

This blew my mind . I'm making a website for Basics of Web Development class and it's a presidential campaign page for Saitama from one punch man. I wrapped the bio text around OPM and my teacher said he didn't know how I did that so it blew his mind too!