The mask-border-slice property is used to “slice” the image which is to be used as a mask 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 offset 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.
The mask-border-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 mask-border-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 mask-border-width and mask-border-outset properties. You can read more about how these properties work together in the mask-border shorthand property entry.
The middle image part is discarded (treated as fully transparent) unless the fill keyword is present in the mask-border-slice property. If the fill keyword is present, the middle piece of the border image is used as a mask layer image on the element. The fill keyword can be placed anywhere in the declaration of the mask-border-slice property (before, after, or even between the other values).
The regions specified by the mask-border-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:
mask-border-slice: [<number> | <percentage>]{1,4} && fill?
- Initial: 0
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: no
Values
The informal syntax looks something like this:
mask-border-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 mask layer 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 mask-border-slice can also inherit its values from the computed values of the element’s parent, using the inherit keyword.
Examples
The following are valid mask-border-slice declarations:
mask-border-slice: 20 fill; /* number is set without units. If the image used is a raster image, it will be considered a pixel value */
mask-border-slice: 30% 25%;
mask-border-slice: fill 125 50 125;
Live Demo
The mask border image used is the following:
Play with the value of the mask-border-slice property to see how that affects the slices of the image.
Note that the demo currently (June, 2014) does not work in any browser. It may be useful to check out the demo from the border-image-slice entry. The way the border mask image is applied is similar to the way a border image is applied, except that the mask image is used to mask parts of the element. The process of setting the images is the same, so checking that entry may be useful for more insight and to better know what to expect from this property.
Browser Support
CSS Masks
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 120
- 53
- No
- 106
- 15
Mobile / Tablet
- 15
- 123
- No
- 123
- 124
Notes
This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.