CSS mask-clip

The mask-clip property in CSS specifies the painting area of the mask which is defined by mask-image. It determines whether the mask should be constrained to the bounding box or the border box of the element. This property is helpful when you want to create interesting visual effects by clipping the mask in a specific area.

There are three possible values for mask-clip:

  1. border-box: The mask is clipped to the border box of the element.
  2. padding-box: The mask is clipped to the padding box of the element.
  3. content-box: The mask is clipped to the content box of the element.

Let's see some examples to better understand how mask-clip works:

Result:

In this example, we have a div element with a background color and a mask image applied to it. Let's now apply different values of mask-clip to see how it affects the mask:

Result: 

    .mask-box {
      width: 200px;
      height: 200px;
      background-color: #f0f0f0;
      mask-image: url('mask.png');
      mask-size: cover;
      mask-repeat: no-repeat;
    }

    .border-box {
      mask-clip: border-box;
    }

    .padding-box {
      mask-clip: padding-box;
    }

    .content-box {
      mask-clip: content-box;
    }

As you can see from the above examples, changing the mask-clip property alters how the mask is applied to the element. Experiment with different values to achieve the desired visual effects in your projects.