border-image

border-image paints an image in place of the ordinary border. Its shorthand combines source, slice, width, outset, and repeat settings. A gradient can supply a complete example without loading an image file.

Paint a gradient border

The ordinary solid border reserves 8px and supplies a fallback. Slice 1 divides the gradient for border painting.

<p class="frame">A blue-to-green gradient frame.</p>

.frame {
  padding: 1rem;
  border: 8px solid #2563eb;
  border-image: linear-gradient(90deg, #2563eb, #0f766e) 1;
}

Paint outside the reserved border area

The first slash sets image width to 8px; the second sets a 4px outset. The extra painted area does not add layout space, so the example leaves margin around it.

<p class="frame">The border image extends 4px outward.</p>

.frame {
  margin: 1rem;
  padding: 1rem;
  border: 8px solid #2563eb;
  border-image: linear-gradient(45deg, #2563eb, #0f766e) 1 / 8px / 4px stretch;
}

Syntax and defaults

Slice uses one-to-four unitless numbers or percentages, optionally followed by fill to paint the center too. Slash-separated width and outset follow the slice. Repeat accepts stretch, repeat, round, or space, with an optional second value for the other axis.

Omitted shorthand values reset: source none, slice 100%, width 1 (a multiplier of border width), outset 0, repeat stretch. The settings are not inherited. A border shorthand declared afterward clears the border image, so declare the ordinary fallback border first.

Common mistakes

Specify an ordinary border style and width for fallback and reliable rendering. Border-image does not follow border-radius; use a different framing approach when rounded gradient corners are essential. Its painted image is decorative and has no text alternative. Keep important information in HTML.

Learn border, border-radius, and background-image.

Sources and browser support

MDN: border-image describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.