CSS mask-clip property

Last Updated : 8 Jun, 2023

The mask-clip CSS property specifies the area which is affected by the mask.

Syntax:

mask-clip: geometry-box values
/* Or */
mask-clip: Keyword values
/* Or */
mask-clip: Non-standard keyword values
/* Or */
mask-clip: Multiple values
/* Or */
mask-clip: Global values

Property values: This property accepts values mentioned above and described below:

geometry-box values: This property value refers to the values defined with units like content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box, etc.
Keyword values: This property value refers to the values defined with units like no-clip, etc
Non-standard keyword values: This property value refers to the values defined with units like border, padding, content, text, etc.
Multiple values: This property value refers to the values defined with units like padding-box, no-clip, view-box, fill-box, border-box, etc.
Global values: This property value refers to the values defined with units like inherit, initial, unset, etc

Example 1: Below example illustrates the mask-clip property using border-box :

Output:

👁 Image

Example 2: Below example illustrates the mask-clip property using padding-box :

Output:

👁 Image

Browsers Supported: