mask-origin

Summary

For elements rendered as a single box, specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes box-decoration-break operates on to determine the mask positioning area(s).

Overview table

Initial value: border-box
Applies to: All elements. In SVG, it applies to container elements without the element and all graphics elements.
Inherited: No
Media: visual
Computed value: As specified.
Animatable: No

CSS Object Model Property
:

Percentages: N/A

Syntax

mask-origin: border-box
mask-origin: content-box
mask-origin: padding-box

Values

padding-box: The position is relative to the padding box. (For single boxes, 0 0 is the upper left corner of the padding edge; 100% 100% is the lower right corner.)
border-box: The position is relative to the border box (painting box for objects without associated layout box).
content-box: The position is relative to the content box (object bounding box for objects without associated layout box).

Examples

/* padding-box */
body {
    background-color: white;
    mask-image: url(big-black-dot.jpg);
        mask-position: bottom right;
    mask-repeat: no-repeat;
        mask-origin: padding-box;
    }

Padding box

.example {
    border: 10px double;
    padding: 10px;
    -webkit-mask-image: url('mask.png');

    /* The mask image will be inside the padding */
    -webkit-mask-origin: content;
}

Padding box

div {
    -webkit-mask-image: url('mask1.png'), url('mask2.png');
    -webkit-mask-origin: padding, content;
}

Related specifications

CSS Masking Level 1: W3C Editor’s Draft