Manuales 
mask-border-outset 1g37q
The area to which the mask-border-outset property. 4d1f3f
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 55184y
- Syntax:
mask-border-width: [<number>]{1,4}
- Initial: 0
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: no
Values 584j31
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 <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
border-widthof the element.
Notes z5jo
For SVG elements without associated layout box the border-width is considered to be zero.
Examples 3e5p5z
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 2x4j2k
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 k5t66
CSS Masks 1o5wz
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
ed from the following versions:
Desktop 3n671n
- No
- 53
- No
- No
- No
Mobile / Tablet 4q224p
- No
- No
- No
- No
- 60
Notes z5jo
This module, as you can see in the 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 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.