The mask-clip property

The mask-clip property sets the element area within which the mask will be displayed. It determines which parts of the element will be affected by masking and which will remain visible without changes.

Syntax

selector {
	mask-clip: value | no-clip;
}

Values

Value	Description
`border-box`	The mask is applied to the area including the element's borders.
`padding-box`	The mask is applied to the area including padding, but not borders.
`content-box`	The mask is applied only to the element's content.
`margin-box`	The mask is applied to the area including margin (experimental).
`fill-box`	The mask is applied to the object's bounding box (for SVG).
`stroke-box`	The mask is applied to the stroke bounding box (for SVG).
`view-box`	The mask is applied to the viewbox (for SVG).
`no-clip`	The mask is not limited to the element's area.

Default value: border-box.

Example . Applying mask-clip to different areas

Comparing different mask-clip values on an element with borders and padding:

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

.box {
	width: 200px;
	height: 100px;
	margin: 20px;
	padding: 20px;
	border: 10px dashed black;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, black, transparent);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	display: inline-block;
}

.border-box {
	mask-clip: border-box;
}

.padding-box {
	mask-clip: padding-box;
}

.content-box {
	mask-clip: content-box;
}

Example . Using no-clip

Demonstration of no-clip value where the mask extends beyond the element:

<div id="elem"></div>

#elem {
	width: 200px;
	height: 200px;
	background: linear-gradient(45deg, red, blue);
	mask-image: radial-gradient(circle, black 50%, transparent 70%);
	mask-size: 300px 300px;
	mask-position: center;
	mask-clip: no-clip;
	border: 2px solid black;
}

Example . SVG with different mask-clip values

Applying different values to an SVG element:

<svg width="400" height="200">
	<defs>
		<mask id="mask1" maskContentUnits="objectBoundingBox">
			<rect x="0.1" y="0.1" width="0.8" height="0.8" fill="white"/>
		</mask>
	</defs>
	
	<rect x="10" y="10" width="180" height="180" fill="blue" 
		mask="url(#mask1)" mask-clip="fill-box"/>
		
	<rect x="210" y="10" width="180" height="180" fill="red" 
		mask="url(#mask1)" mask-clip="view-box"/>
</svg>