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.
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;
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.
If a percentage value is used, the values are relative to the height or width of the source border image’s size respectively.
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.
Global CSS keyword – this sets the property to the default value.
Global CSS keyword – this sets the property to be inherited from its parent element.
Have a code example of
border-image-slice? Submit a codepen.io demo and we'll showcase it here ↴
Help @reference spread the word by sharing this article on Twitter...Tweet This