background + padding

A gradient border that keeps its corners

Caveatborder-image ignores border-radius outright — square corners, every time, and no amount of radius fixes it. So the border is not a border here: it is padding over a gradient background.

FallbackGive the inner radius the outer value minus the padding. Match them and the corners sit visibly wrong, one curve inside another.

.frame {
  /* the padding IS the border width */
  padding: 1px;
  border-radius: 14px;
  background: linear-gradient(
    135deg, #6fa8dc, #93c47d, #f6b26b);
}

.frame > * {
  border-radius: 13px; /* 14 - 1 */
  background: #131822;
}

Published 17 Aug 2026