1. css
  2. /properties
  3. /mask-clip

mask-clip

Definition

The mask-clip CSS property defines the area of an element where the mask image will be visible. This property applies to an element that has a mask image applied to it using the mask-image property. The mask-clip property allows you to control which parts of the element will be visible through the mask image, by defining the shape and size of the mask.

Examples

Using mask-clip with a rectangle:

.element {
  mask-image: url('mask-image.png');
  mask-clip: border-box;
}

Using mask-clip with a circle:

.element {
  mask-image: url('mask-image.png');
  mask-clip: circle(50% at center);
}

Using mask-clip with an ellipse:

.element {
  mask-image: url('mask-image.png');
  mask-clip: ellipse(50% 70% at center);
}

Values

ValueDescription
border-boxThe mask image will be clipped to the border of the element.
padding-boxThe mask image will be clipped to the padding area of the element.
content-boxThe mask image will be clipped to the content area of the element.
fill-boxThe mask image will be clipped to the painted area of the element.
stroke-boxThe mask image will be clipped to the stroke area of the element.
margin-boxThe mask image will be clipped to the margin area of the element.
no-clipThe mask image will not be clipped to the element.
<shape>A CSS shape that defines the clipping region.
<geometry-box>A keyword that specifies which box to use as the clipping region.

Best Practices

  • Use the border-box value as a default. It is the most commonly used value and will usually provide the desired result.
  • Use shapes with caution. Shapes can be complex and difficult to manage, so use them only when necessary.
  • Use the no-clip value with care. This will allow the mask image to be visible outside of the element, which can lead to unexpected results.
  • Use the padding-box value if you want the mask image to be visible only within the padding area of the element.
  • Experiment with different values and shapes to achieve the desired result.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes