The area to which the border mask image is to be applied is called the border mask image area. By default, the boundaries of the border mask image area correspond to the boundaries of the element’s border box. However, the boundaries of the border mask image area can be extended using the mask-border-outset property.
The mask-border-outset property is used to specify the amount by which the border mask image area is extended beyond the element’s border box area. The amount is specified as a set of outset values that specify the amount by which the border mask image area will be expanded from the top, right, bottom, and left edges.
The mask-border-outset property can take four, three, two, or one outset values.
When four values are specified, they set the outsets on the top, right, bottom and left sides in that order. If three values are specified, the first one specifies the top outset, the second one specifies the right and left outsets, and the third one specifies the bottom outset. If two values are specified, the first one specifies the top and bottom outsets, and the second one specifies the right and left outsets. If one value is specified, it specifies all the four outsets.
Official Syntax
Values
The informal syntax looks something like this:
mask-border-outset = [outset] [outset]? [outset]? [outset]?
The question mark (?) indicates that the value is optional. When one outset is specified, it is used as a top, right, bottom, and left outset. When two outsets are specified, the first one represents the top and bottom outsets and the second one represents the right and left outsets. When three outsets are specified, the first represents the outset from the top, the second one represents the outset from the right and left, and the third one represents the bottom outset. When four outsets are specified, they represent the top, right, bottom, and left outsets, in that order.
These outsets can be specified as <length> or <number> values. Negative outset values are not allowed for any of the mask-border-outset values.
- <length>
-
See the
<length>entry for a list of possible values. - <number>
-
A
<number>value represents multiples of the corresponding computedborder-widthof the element.
Notes
For SVG elements without associated layout box the border-width is considered to be zero.
Examples
The following are valid mask-border-outset values.
mask-border-outset: 30px; /* one-value syntax, all outsets will be equal to 30px */
mask-border-outset: 2 4; /* two-value syntax, top and bottom offsets = 2 * border-width, right and left offsets = 4 * border-width */
mask-border-outset: 10px 20px 30px; /* three-value syntax */
mask-border-outset: 4; /* border mask image outset is 4 times the width of the border specified using the boder-width property */
Live Demo
The border mask image used is the following:
The default mask border image painting area is inside the element’s border box, which means it would be restricted to the black background. The mask-border-outset in this example has been set to 20px, which extends the mask border image area 20px outside the element’s border box. Play with the value of the mask-border-outset property to see how that affects the area of the border 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-outset 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
- 131
- No
- 131
- 132
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.
