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

Summary

Determines the mask painting area, which defines the area that is affected by the mask. The painted content of an element may be restricted to this area.

Overview table

Initial value
border-box
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
As specified.
Animatable
No

CSS Object Model Property
:

Percentages
N/A

Syntax

  • mask-clip: border-box
  • mask-clip: content-box
  • mask-clip: no-clip
  • mask-clip: padding-box

Values

no-clip
The painted content is not restricted (not clipped). The mask painting area is set to the bounding client rect.
border-box
The painted content is restricted (clipped) to the border box (painting box for objects without associated layout box).
padding-box
The painted content is restricted (clipped) to the padding box.
content-box
The painted content is restricted (clipped) to the content box (object bounding box for objects without associated layout box).

Examples

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

Related specifications

CSS Masking Level 1
W3C Working Draft