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-collapse
iscollapse
- 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
fill
keyword, 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
- 130
- No
- 130
- 130