This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

CSS Object Model Property
:

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