border-image-slice | CSS CSS Properties

Determines how to 'cut' the border image into nine pieces (four corners, four edges, and a center). These pieces are then used to build the final border by resizing them to fit your element.

Quick example

.sliced-box {
  border: 30px solid;
  border-image-source: url('border.png');
  /* Cut 30px from each edge of the image source */
  border-image-slice: 30;
}

Quick facts

Initial value

100%

Inherited

Applies to

all elements (except table elements when collapse)

Animation type

byComputedValueType

Values

numberpercentagefill

border-image-slice 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 →

15+

12+