CSS mask-origin property

Previous Page mask-mode
Next Page mask-position

Definition and Usage

mask-origin The attribute specifies the original position of the mask layer image (i.e., the mask position area).

Example

Display mask-origin Different Values of the Attribute:

.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

CSS Syntax

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

Attribute Value

Value	Description
border-box	Position relative to the border box. Default value.
content-box	Position relative to the content box.
padding-box	Position relative to the inner border box.
fill-box	Position relative to the object boundary box.
stroke-box	Position relative to the stroke boundary box.
view-box	Uses the nearest SVG viewport as the reference box.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	border-box
Inheritance:	No
Animation Creation:	Not supported. See:Animation-related Properties.
Version:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskOrigin="padding-box"