mask-origin

Example

Using mask-origin: border-box; and mask-origin: content-box;:

.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}

.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(sw3logo.png);
mask-image: url(sw3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}

Try it Yourself »

Definition mask-origin

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:	CSS3
JavaScript syntax:	object.style.maskOrigin="padding-box"

Browser Support mask-origin

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
mask-origin	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

CSS Syntax mask-origin

Property Values mask-origin

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
margin-box	The position is relative to the margin 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