Post

💡 CSS Tip! We've just had the release of @developer.chrome.com 147, which means border-shape was enabled by default! 👀 css-tip.com/border-shape/ Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩

This honestly feels like the biggest revolution in web browsers since mosaic to me... true non-rectangular elements? Sure we had ways to do clipping and rounded corners and such, but in the end they were always just rectangles

Maybe we need a `shape-inside`

There is a half-spec for it but it's really problematic in terms of overflow (what's the right way to overflow from a heart shaped text?), and in general for readability you mostly want to pad your text rather than shape it like the decoration around it.

Interesting. I figured that the behavior would be similar to an element with two `shape-outside` floats on the left and right mirroring the outer shape. In fact I was just thinking earlier to prototype that using a `::before` and `::after`. But that's probably too naive (e.g. overflow/scroll).