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 🤩

Maikel Krause

@maikelkrause.bsky.social

8 Apr

I updated an old codepen with a quick little tooltip prototype (using one of your css-generators examples): codepen.io/maikelkrause... The last shape there. One disappointing aspect I noticed is that the background doesn't extend. Can't combine it with `border-image` either.

codepen.ioCSS-only tooltip using shape()...

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.

8/4/26, 7:57 pm0 reposts2 likes

Maikel Krause

@maikelkrause.bsky.social

8 Apr

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.