CSS mask-clip property

Previous Page mask
Next Page mask-composite

Definition and Usage

mask-clip The property is used to specify the area affected by the mask image.

Examples

Display mask-clip Different values of properties:

.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

CSS Syntax

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Attribute Value

Value	Description
border-box	The content to be drawn is clipped to the border box. Default value.
content-box	The content to be drawn is clipped to the content box.
padding-box	The content to be drawn is clipped to the padding box.
fill-box	The content to be drawn is clipped to the object bounding box.
stroke-box	The content to be drawn is clipped to the stroke bounding box.
view-box	Uses the nearest SVG viewport as the reference box.
no-clip	No clipping.
border	Same as border-box.
padding	Same as padding-box.
content	Same as content-box.
text	Cuts the mask to the element's text.
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.maskClip="padding-box"