Obliterate Boxiness with CSS Shapes


By default, everything on a webpage is a box. But it doesn’t have to be. CSS Shapes lets us flow content around circles, polygons, masks and other shapes. Jen shows you how using Firefox dev…



  1. Great content as always … shape-outside: circle() does not work in Firefox 60.0.1 64 bit Windows 10. The simple example provided in the video does work in Chrome but not in Firefox.

  2. Hi Jen, I love CSS-Shapes like you and I love you for your vdeos.
    Anyway about images like grapes, instead of polygon, I prefer to use "shape-outside" passing in the img url and then using the property "shape-image-threshold" by a value from 0 to 1; 0.5 is pretty good and the result is perfect. It also works in Firefox

  3. Is there a way we could create those triangles to be responsive. As in as the page becomes smaller so do the triangles thus manipulating the text within them? I've been trying to recreate them to no avail

  4. This really something we as (originally) print-designers have been waiting for. Especially the decent tools for text-wrap. Is Mozilla going to do a Blog-post or screencast like this about the vector-outline tool when it's finished? Thanks for taking the time to explain and upload this wonderfull technique.

  5. That's it! With css grid and css shapes… Web design technology is done. We can now do any kind of layouts for the Web. Magazine quality layouts are finally possible (without hacking). 🙂 thanks!

  6. Oh wow excellent. I totally forgot all about these things LOL I think the big reason is a lot of the designs for the website have forgotten that they could even do something like this. But you're totally right. It looks Way more fluid and visually interesting.