CSS mask-origin Property
Example
Show different values for the mask-origin
property:
.masked {
background: green;
border: 30px solid blue;
padding: 20px;
-webkit-mask-image: url(img_circle.svg);
mask-image: url(img_circle.svg);
mask-size: 50%;
mask-repeat: no-repeat;
}
.mask1 {
mask-origin: border-box;
}
.mask2 {
mask-origin: content-box;
}
.mask3 {
mask-origin:
padding-box;
}
.mask4 {
mask-origin: fill-box;
}
Try it Yourself »
Definition and Usage
The mask-origin
property specifies the origin position (the
mask
position area) of a mask layer image.
Default value: | border-box |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS Masking Module Level 1 |
JavaScript syntax: | object.style.maskOrigin="padding-box" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
mask-origin | 120 | 120 | 53 | 15.4 | 106 |
CSS Syntax
mask-origin:
border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;
Property Values
Value | Description |
---|---|
border-box | The position is relative to the border box. This is default |
content-box | The position is relative to the content box |
padding-box | The position is relative to the padding box |
fill-box | The position is relative to the object bounding box |
stroke-box | The position is relative to the stroke bounding box |
view-box | Use the nearest SVG viewport as reference box |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS reference: mask property
CSS reference: mask-clip 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