Mask-clip

The mask-clip CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.

Syntax

/* <coord-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* Keyword values */
mask-clip: no-clip;

/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/* Global values */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;

Values

The property accepts a comma-separated list of keyword values. Each value is a <coord-box> or no-clip:

content-box: The painted content is clipped to the content box.
padding-box: The painted content is clipped to the padding box.
border-box: The painted content is clipped to the border box.
fill-box: The painted content is clipped to the object bounding box.
stroke-box: The painted content is clipped to the stroke bounding box.
view-box: Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
no-clip: The painted content is not clipped.
border: This keyword behaves the same as border-box.
padding: This keyword behaves the same as padding-box.
content: This keyword behaves the same as content-box.
text: This keyword clips the mask image to the text of the element.

Description

The mask-clip property defines the area of the element that is affected by the applied mask.

For mask layer images that do not reference an SVG <mask> element, the mask-clip property defines the mask painting area, or the area affected by the mask. The painted content of the element will be restricted to this area.

The mask-clip property has no affect on a mask layer image that references a <mask> element. The <mask> element's x, y, width, height, and maskUnits attributes determine the mask painting area when the source of the mask-image is a <mask>.

An element can have multiple mask layers applied. The number of layers is determined by the number of comma-separated values in the mask-image property value (even if a value is none). Each mask-clip value in the comma-separated list of values is matched up with the mask-image values, in order. If the number of values in the two properties differs, any excess values of mask-clip are not used, or, if mask-clip has fewer values than mask-image, the mask-clip values are repeated.

Formal definition

Initial value	`border-box`
Applies to	all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

mask-clip = 
  [ <coord-box> | no-clip ]#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Examples

>

Clipping a mask to the border box

This examples demonstrates three mask-clip values.

HTML

We include three elements, each with a different <coord-box> value as a class name.

<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

CSS

The CSS defines the element to have a background, border, padding, and margin, along with a mask image, with each <div> having a different <coord-box>. We generated content with the name of the class, moving that text up 10px to prevent it from being masked out of view.

div {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 10px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
  mask-size: 100% 100%;
}
.content-box {
  mask-clip: content-box;
}
.border-box {
  mask-clip: border-box;
}
.padding-box {
  mask-clip: padding-box;
}
div::before {
  content: attr(class);
  position: relative;
  top: -10px;
}

Results

Specifications

Specification
CSS Masking Module Level 1> # the-mask-clip>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`mask-clip`	1201	12079	53	10615	15.44	12018	53	8014	15.43.2	25.01.0	1202	15.43.2
`border`	1 Only works when using `-webkit-mask-clip`.	79 Only works when using `-webkit-mask-clip`.	No	15 Only works when using `-webkit-mask-clip`.	4	18 Only works when using `-webkit-mask-clip`.	No	14 Only works when using `-webkit-mask-clip`.	3.2	1.0 Only works when using `-webkit-mask-clip`.	2	No
`border-box`	120	120	53	106	No	120	53	80	No	25.0	120	No
`content`	1 Only works when using `-webkit-mask-clip`.	79 Only works when using `-webkit-mask-clip`.	No	15 Only works when using `-webkit-mask-clip`.	4	18 Only works when using `-webkit-mask-clip`.	No	14 Only works when using `-webkit-mask-clip`.	3.2	1.0 Only works when using `-webkit-mask-clip`.	2	No
`content-box`	120	120	53	106	No	120	53	80	No	25.0	120	No
`fill-box`	120	120	53	106	No	120	53	80	No	25.0	120	No
`no-clip`	120	120	53	106	No	120	53	80	No	25.0	120	No
`padding`	1 Only works when using `-webkit-mask-clip`.	79 Only works when using `-webkit-mask-clip`.	No	15 Only works when using `-webkit-mask-clip`.	4	18 Only works when using `-webkit-mask-clip`.	No	14 Only works when using `-webkit-mask-clip`.	3.2	1.0 Only works when using `-webkit-mask-clip`.	2	No
`padding-box`	120	120	53	106	No	120	53	80	No	25.0	120	No
`stroke-box`	120	120	53	106	No	120	53	80	No	25.0	120	No
`text`	1 Only works when using `-webkit-mask-clip`.	79 Only works when using `-webkit-mask-clip`.	No	15 Only works when using `-webkit-mask-clip`.	4	18 Only works when using `-webkit-mask-clip`.	No	14 Only works when using `-webkit-mask-clip`.	3.2	1.0 Only works when using `-webkit-mask-clip`.	2	No
`view-box`	120	120	53	106	No	120	53	80	No	25.0	120	No