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 >
|
Output:
Browsers Supported:
- Chrome 1
- Edge 79
- Opera 15
- Safari 15.4
- Internet Explorer (Not Supported).
- Firefox 53
Share your thoughts in the comments
Please Login to comment...