CSSmask-clip Property
Example
Show different values for themask-clip property:
.masked {
width: 150px;
height: 150px;
background: green;
border: 30px solid blue;
padding: 20px;
-webkit-mask-image: url(img_circle.svg);
mask-image: url(img_circle.svg);
mask-size: 100% 100%;
}
.mask1 {
mask-clip: border-box;
}
.mask2 {
mask-clip: content-box;
}
.mask3 {
mask-clip: padding-box;
}
.mask4 {
mask-clip: fill-box;
}
.mask5 {
mask-clip: stroke-box;
}
Try it Yourself »width: 150px;
height: 150px;
background: green;
border: 30px solid blue;
padding: 20px;
-webkit-mask-image: url(img_circle.svg);
mask-image: url(img_circle.svg);
mask-size: 100% 100%;
}
.mask1 {
mask-clip: border-box;
}
.mask2 {
mask-clip: content-box;
}
.mask3 {
mask-clip: padding-box;
}
.mask4 {
mask-clip: fill-box;
}
.mask5 {
mask-clip: stroke-box;
}
Definition and Usage
Themask-clip property specifies which area is affected by a mask image.
| Default value: | border-box |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS Masking Module Level 1 |
| JavaScript syntax: | object.style.maskClip="padding-box" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| mask-clip | 120 | 120 | 53 | 15.4 | 106 |
CSS Syntax
mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;
Property Values
| Value | Description |
|---|---|
| border-box | The painted content is clipped to the border box. This is default |
| content-box | The painted content is clipped to the content box |
| padding-box | The painted content is clipped to the padding box |
| fill-box | The painted content is clipped to the object bounding box |
| stroke-box | The painted content is clipped to the stroke bounding box |
| view-box | Use the nearest SVG viewport as reference box |
| no-clip | No clipping |
| border | The same as border-box |
| padding | The same as padding-box |
| content | The same as content-box |
| text | Clips the mask to the text of the element |
| initial | Sets this property to its default value.Read aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
Related Pages
CSS reference:mask property
CSS reference:mask-composite property
CSS reference:mask-image property
CSS reference:mask-mode property
CSS reference:mask-position property
CSS reference:mask-repeat property
CSS reference:mask-size property
CSS tutorial:CSS Masking
