The mask-origin property

The mask-origin property sets the reference point for mask positioning. It determines which part of the element (border, padding, or content) the mask will be positioned relative to.

Syntax

selector {
	mask-origin: content-box | padding-box | border-box;
}

Values

Value	Description
`border-box`	The mask is positioned relative to the element's border (including border).
`padding-box`	The mask is positioned relative to the padding area (default).
`content-box`	The mask is positioned relative to the element's content.

Example . border-box

Mask positioned relative to the element's border:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: border-box;
}

Example . padding-box

Mask positioned relative to the padding area:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: padding-box;
}

Example . content-box

Mask positioned relative to the content:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: content-box;
}

The mask-origin property

Syntax

Values

Example . border-box

Example . padding-box

Example . content-box

See also