A gradient border that keeps its corners

Q: Why does my gradient border have square corners?

border-image ignores border-radius outright — no amount of radius fixes it, because the image is painted on the border box before the corner is ever rounded. The way out is not to use a border at all.

Studio

Unlimited projects, shared components, and a staging domain per branch.

$24 / month

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.

CSS

.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

Questions

Why does my gradient border have square corners?

border-image ignores border-radius outright — no amount of radius fixes it, because the image is painted on the border box before the corner is ever rounded. The way out is not to use a border at all.

How do you make a rounded gradient border then?

Paint the gradient as a background and cover the middle with padding: an outer box with the gradient and the outer radius, an inner surface inset by the border width. Two backgrounds clipped to border-box and padding-box do the same thing in one element.

Why do the corners look wrong even with a radius on both boxes?

Because they need different radii. The inner radius is the outer one minus the padding; match them and you get one curve visibly sitting inside another, which reads as sloppy long before anyone can say why.