border-image-slice

The border-image-slice property defines how the image set as the border-image-source is going to be sliced to create the new border based on that image.

Syntax

The border image is sliced into 9 total regions, out of which 4 are corner regions, 4 are the top, right, bottom and left edges and there is one region that is the middle of the image.
Each of the corner regions is used a single time in the place of a corner for the rendered border image, while the top, right, bottom and left edges are depending on the border-image-repeat property for their processing. The middle region isn’t used at all unless fill is set for a value.
Anywhere from one to four values can be specified, each of which is used for the top, right, bottom and left slicing distances. If the fourth value is omitted, the second value is taken as the fourth value, if both the third and fourth values are omitted, the third value is set based on the first one, while the fourth is based on the second one. If only one value is specified – it is used for all four sides.
The values can be either a number or a percentage. If a number is used – it represents pixels for raster images, while it represents coordinates for vector images.

/* A single number being used for all sides: */
border-image-slice: 30;
/* Two percentages used, first value is for the slices created from the top and bottom,
while the second value is used for the slices created from the left and right */
border-image-slice: 25% 40%;
/* Four values and fill being used: */
border-image-slice: 30 5% 10% 15 fill;

Values

number
If a number is used, it represents the amount of pixels (or coordinates in the case of vector images) for the offset from the respective edge out of which the slices are created.

percentage
If a percentage value is used, the values are relative to the height or width of the source border image’s size respectively.

fill
If the fill keyword is used, the middle region of the source image that gets created in the slicing process gets displayed inside the element like a background image. (in case a background image is also used on the element, this is displayed on top of the element’s background). The width and height of the filling image are matching the top and left image regions respectively.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-image-slice? Submit a codepen.io demo and we'll showcase it here ↴