The border-image-slice property is used to “slice” the image which is to be used as a border image into nine pieces: four corners, four edges, and one center piece.
The size of the nine pieces is determined based on the top, right, bottom, and left offsets of four imaginary lines that are offsetted inwards from the edges of the element. The offsets can be specified using absolute <number> values or <percentage> values. The four offsets don’t have to be equal.
For example, the following image has been sliced into 9 pieces. The top, right, bottom, and left offsets have an equal value of 124px.
The border-image-slice property can take four, three, two, or one offset values.
When four values are specified, they set the offsets on the top, right, bottom and left sides in that order. If three values are specified, the first one specifies the top offset, the second one specifies the right and left offsets, and the third one specifies the bottom offset. If two values are specified, the first one specifies the top and bottom offsets, and the second one specifies the right and left offsets. If one value is specified, it specifies all the four offsets.
The corner pieces of the sliced image will be placed at the corners of the element to which it is going to be applied. The edges of the sliced images will be placed on the edges of the element. The border-image-repeat property specifies how the image edges will be applied to the element’s edges. The size of these slices and position is specified using the border-image-width and border-image-outset properties. You can read more about how these properties work together in the border-image shorthand property entry.
The middle image part is discarded (treated as fully transparent) unless the fill keyword is present in the border-image-slice property. If the fill keyword is present, the middle piece of the border image is used as a background image to the element. The fill keyword can be placed anywhere in the declaration of the border-image-slice property (before, after, or even between the other values).
The regions specified by the border-image-slice values may overlap. However, if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Same is applied for the top and bottom values.
Official Syntax
-
Syntax:
border-image-slice: [<number> | <percentage>]{1,4} && fill?
- Initial: 100%
-
Applies To: All elements, except internal table elements when
border-collapseiscollapse - Animatable: no
Values
The informal syntax looks something like this:
border-image-slice = [offset] [offset]? [offset]? [offset]? fill?
The question mark (?) indicates that the value is optional. When one offset is specified, it is used as a top, right, bottom, and left offset. When two offsets are specified, the first one represents the top and bottom offsets and the second one represents the right and left offsets. When three offsets are specified, the first represents the offset from the top, the second one represents the offset from the right and left, and the third one represents the bottom offset. When four offsets are specified, they represent the top, right, bottom, and left offsets, in that order.
Each offset is represented as a <number> or <percentage> value. <length> values are not allowed.
Percentage values are specified as percentages and thus require the ‘%’ sign after the numerical value. Number values do not take any unit. The number represents pixels for raster images and coordinates for vector images.
Negative offset values are not allowed. Percentage values are computed relative to the element’s height or width, whichever applied (left and right percentage offsets are computed relative to the element’s width and top and bottom percentage offsets are computed relative to the element’s height). If the percentage value specified is larger than ‘100%’, it is computed as if it were equal to ‘100%’.
- fill
-
The
fillkeyword, if present, causes the middle part of the border image to be preserved and used as an additional background image on the element. (By default it is discarded, i.e., treated as empty.) The size of the middle part and its height are resized like those of the top and left image slices, respectively.
Notes
The border-image-slice can also inherit its values from the computed values of the element’s parent, using the inherit keyword.
Examples
The following are valid border-image-slice declarations:
border-image-slice: 20 fill; /* number is set without units. If the image used is a raster image, it will be considered a pixel value */
border-image-slice: 30% 25%;
border-image-slice: fill 125 50 125;
Live Demo
The mask border image used is the following:
Play with the value of the border-image-slice property to see how that affects the slices of the image.
Browser Support
CSS3 Border images
Method of using images for borders
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 56
- 50
- 11
- 43
- 15
Mobile / Tablet
- 15
- 131
- No
- 131
- 132
