mask-border-width
Summary
This property sets the width of the mask box image, similar to the CSS border-image-width property.
Overview table
- Initial value
auto
- Applies to
- All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements.
- Inherited
- No
- Media
- visual
- Computed value
- All <length>s made absolute, otherwise as specified.
- Animatable
- No
- Percentages
- Relative to width/height of the mask box image area.
Syntax
mask-border-width: auto
mask-border-width: length
mask-border-width: number
mask-border-width: percentage
Values
- auto
- If specified, the mask box image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see mask-border-slice). If the image does not have the required intrinsic dimension then the corresponding border-width is used.
- length
- Represents pixels if the image is a raster image or vector coordinates if the image is a vector image.
- percentage
- Refers to the size of the mask border image area: the width of the area for horizontal offsets, the height for vertical offsets.
- number
- Represents multiples of the corresponding computed border-width.
Examples
/* auto */
#maskbox1: {
mask-border-width: auto;
}
/* percentage */
#maskbox2: {
mask-border-width: 5%;
}
.exampleone {
-webkit-mask-border: url('mask.png');
}
.exampletwo {
-webkit-mask-border: url('logo.png') 100 100 0 0 round round;
}
Related specifications
- CSS Masking Level 1
- W3C Last Call Working Draft
- CSS Masking Level 1
- W3C Editor’s Draft