Post

CSS by T. Afif
@css-only.dev

You can rectify the last example using an inset box-shadow `box-shadow: 0 0 0 999px inset var(--color)` But I'd rather adjust the code to make the shape "inside" the boundary of the element if you want to use border-shape.

Maikel Krause
@maikelkrause.bsky.social

Oh, clever! Did not know an inset box-shadow could do that. I did consider just moving it inside the content area, but I kinda like it physically jotting out of the element. In a real world scenario if it weren't sticking out I'd probably need to compensate for it in terms of margins all the time.

Maikel Krause
@maikelkrause.bsky.social

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

CSS by T. Afif
@css-only.dev

There are still rectangles considering the flow and their content but at least the decoration is now following the non-rectangular shape.

Noam Rosenthal
@nomster.bsky.social

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.