CSS border-shape (CSS Borders and Box Decorations Module Level 4) lets authors define an element’s border geometry using <basic-shape> values (circle(), ellipse(), polygon(), inset(), shape(), path(), rect()) instead of a rectangle.

It has two modes: a single shape “stroke” mode, where the border is drawn along the path, and a two shape “fill” mode, where the border fills the area between an outer and inner shape.

Unlike clip-path, which only masks the rendered box, border-shape redefines the actual border geometry, so background, border image, outline and box shadow all correctly follow the new shape. It removes the need for clip-path plus pseudo element hacks for things like speech bubbles, scalloped cards, cut corner tooltips and hexagonal avatars.