border-image | CSS CSS Properties

A massive shorthand for using an image (or gradient) to style an element's borders. It combines source, slice, width, outset, and repeat into one powerful line of CSS.

Quick example

.premium-box {
  /* source | slice | repeat */
  border-image: linear-gradient(red, blue) 20% round;
  border-width: 10px;
  border-style: solid;
}

Quick facts

Initial value

See individual properties

Inherited

Applies to

all elements (except table elements when collapse)

Values

border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat

border-image Browser Support

Widely available Since 2017 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

16+

15+

12+