Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with
clip-path. […] This is whereborder-shapecomes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border.
Welp, clip-path() had a good run. I’ll always be fond of tools like Clippy. But border-shape() serves a much more common use case: you want to re-shape an element but not lose the border or box-shadow and whatnot.
Wes Bos has a great short video showing off a use case combining it with the also-mega-powerful shape() function. I was hoping that an element newly-formed via border-shape would automatically have text flow into the new shape, but alas, it does not. If you extend the shape, the text flow ignores it, if you cut into the shape, it just cuts off the text, as if the text were still set in the rectangle of the original element. If you’re clever, though, you can split the shape into left/right halves and use shape-outside to reflow text into the new shape.
