The tooltip is drawn in the bottom border, outside of the box, thanks to border-image-outset

HELLO
.el {
  background: #00c6ff;
  border-image-source: paint(tooltip);
  border-image-slice: 0 0 100% 0;
  border-image-width: var(--border-width);
  border-image-outset: var(--border-width);
  --border-width: 20px;
  --tooltip-position: 50%;
  --tooltip-size: 30px;
}