CSS - mask-clip Property

Quiz

CSS mask-clip property controls how a mask is applied to an element. It determines which parts of the element are affected by the mask based on its size and positioning.

Syntax

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

Property Values

Value	Description
border-box	The mask is clipped to the outer edge of the element's border box.
content-box	The mask is clipped to the outer edge of the element's content box.
padding-box	The mask is clipped to the outer edge of the element's padding box.
fill-box	The mask is clipped to the object bounding box, including the padding and border.
stroke-box	The mask is clipped to the stroke (border-area) bounding box.
view-box	The nearest SVG viewport serves as a reference box, aligning content at its origin with dimensions from the viewBox attribute.
no-clip	No clipping occurs.
border	It is same as border-box.
padding	It is same as padding-box.
content	It is same as content-box.
text	It clips the mask to the text of the element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Clip Property

The following examples explain the mask-clip property with different values.

Mask Clip Property with Content Box Value

To apply masks only to the content area of the element, excluding padding, border, and margin, we use the content-box value. The effect is visible strictly within the content area defined by width and height. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: content-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: content-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: content-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Mask Clip Property with Padding Box Value

To apply masks within the padding area of the element, including padding but excluding the border, we use the padding-box value. The effect extends from the content area to the outer edge of the padding. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: padding-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: padding-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: padding-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Mask Clip Property with Border Box Value

To apply masks to cover the entire area of the element, including the content, padding, and border, we use the border-box value. It does not extend into the margin area, affecting the element's full size as seen visually. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: border-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: border-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: border-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Mask Clip Property with Fill Box Value

To apply masks within the bounds of the elements fill, relevant for SVG elements, we use the fill-box value. The mask covers the area that would be filled with color, excluding the stroke. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: fill-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: fill-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: fill-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Mask Clip Property with Stroke Box Value

To apply masks to the area covered by the element's stroke, relevant for SVG elements, we use the stroke-box value. This includes the stroke width, aligning the mask to the outer bounds of the stroke. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: stroke-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: stroke-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: stroke-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Mask Clip Property with View Box Value

To apply masks within the SVG's viewBox bounds, aligning with the SVG's coordinate system, we use the view-box value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: view-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: view-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: view-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Mask Clip Property with No Clip Value

To apply masks without any clipping to the elements box model, we use the no-clip value. The mask effect is not restricted by the boundaries of content, padding, border, or margin, making the mask extend beyond the elements standard box. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: no-clip;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: no-clip;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: no-clip
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

Supported Browsers

Property
mask-clip	120	120	53	15.4	106

css_reference.htm

Print Page