v147 · CSS · concept 1 of 3

Tooltip Architect

One tooltip, two methods. Toggle shadow, border, and focus outline to see where clip-path falls short and where border-shape delivers.

Requires Chrome 147+. In earlier browsers the right-hand tooltip renders as a rectangle.

Old — clip-path

shaped with clip-path
anchor element
Shape
✓ polygon applied
Border
✗ drawn then clipped — invisible
Box-shadow
✗ clipped — using filter:drop-shadow workaround
Focus outline
✗ still rectangular

New — border-shape

shaped with border-shape
anchor element
Shape
✓ polygon applied
Border
✓ follows the shape geometry
Box-shadow
✓ real box-shadow follows the shape
Focus outline
✓ follows the shape (click to try)

how it works

Both tooltips use an identical polygon() path — a rectangle with a downward arrow at 50%. The difference is which property receives it.

/* OLD: clip-path masks the painted area. Border and shadow are still
   drawn for the full rectangle, then clipped away. */
.tip-old {
  background: blue;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 70%,
    58% 70%, 50% 100%, 42% 70%, 0% 70%
  );
  /* box-shadow would be invisible — use filter as a workaround */
  filter: drop-shadow(4px 4px 0px black);
  /* border: 3px solid black; ← drawn then clipped, invisible */
}

/* NEW: border-shape redefines the box geometry. Border, shadow,
   and outline all follow the polygon — no workarounds needed. */
.tip-new {
  background: blue;
  border: 3px solid black;
  box-shadow: 4px 4px 0px black;
  border-shape: polygon(
    0% 0%, 100% 0%, 100% 70%,
    58% 70%, 50% 100%, 42% 70%, 0% 70%
  );
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗