CSS mask-clip property

Last Updated : 08 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 :

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 50%;
            height: 100px;
            background: green;
            border: 10px solid red;
            padding: 10px;
            -webkit-mask-image: url(image.svg);
            mask-clip: border-box;
        }
    </style>
</head>
 
<body>
    <div class="geeks">
        GeeksforGeeks is Computer Science portal.
        GeeksforGeeks is Computer Science portal.
        GeeksforGeeks is Computer Science portal.
    </div>
</body>
</html>

Output:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 50%;
            height: 100px;
            background: green;
            border: 5px solid red;
            padding: 10px;
            -webkit-mask-image: url(image.svg);
            mask-clip: padding-box;
        }
    </style>
</head>
 
<body>
    <div class="geeks">
        GeeksforGeeks is Computer Science portal.
        GeeksforGeeks is Computer Science portal.
        GeeksforGeeks is Computer Science portal.
    </div>
</body>
</html>