border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo:
codepen.io/una/pen/ByzY...Finally solving the tooltip arrow usecase with a new CSS property called border-shape
⚠️ WIP early-stage API, timeline TBD, more info coming soon
But it brings a lil tear to my eye to see this working, border & all 🥲
This demo uses anchored container queries + border-shape + a little animation
