border-shape is a powerful upcoming CSS primitive that defines a custom shape for an element's border.
Una Kravets has written and excellent post about it at https://una.im/border-shape.
I have created a demo at https://codepen.io/ludviglindblom/pen/gbwbdaR.
You can also check out the specification.
Note that this feature is still experimental and currently only available in Chrome 146+ (Canary and Beta builds) with the experimental web platform features flag turned on.