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-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