Skip to content
Related Articles

Related Articles

CSS mask-clip property
  • Last Updated : 11 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

The mask-clip CSS property specifies the area which is affected by the mask.

Syntax:

mask-clip: geometry-box values
/* Or */
mask-clip: Keyword values
/* Or */
mask-clip: Non-standard keyword values
/* Or */
mask-clip: Multiple values
/* Or */
mask-clip: Global values

Property values: This property accepts values mentioned above and described below:

  • geometry-box values: This property value refers to the values defined with units like content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box, etc.
  • Keyword values: This property value refers to the values defined with units like no-clip, etc
  • Non-standard keyword values: This property value refers to the values defined with units like border, padding, content, text, etc.
  • Multiple values: This property value refers to the values defined with units like padding-box, no-clip, view-box, fill-box, border-box, etc.
  • Global values: This property value refers to the values defined with units like inherit, initial, unset, etc

Example 1: Below example illustrates the mask-clip property using border-box :




<!DOCTYPE html>
<html>
    
   <head>
      <style>
  
        .geeks{
              width:50%;
              height:100px;
              background:green;
              border:10px solid red;
              padding:10px;
              -webkit-mask-image:url(image.svg);
              mask-clip: border-box;
        }
        </style>
    </head>
<body>
  
    <div class="geeks" >
          GeeksforGeeks is Computer Science portal.
          GeeksforGeeks is Computer Science portal.
          GeeksforGeeks is Computer Science portal.
    </div>
  
</body>
  
</html>

Output:



Example 2: Below example illustrates the mask-clip property using padding-box :




<!DOCTYPE html>
<html>
    <head>
       <style>
          .geeks{
                width:50%;
                height:100px;
                background:green;
                border: 5px solid red;
                padding:10px;
                -webkit-mask-image:url(image.svg);
                mask-clip: padding-box;
          }
  
        </style>
    </head>
<body>
  
      <div class="geeks" >
            GeeksforGeeks is Computer Science portal.
            GeeksforGeeks is Computer Science portal.
            GeeksforGeeks is Computer Science portal.
      </div>
  
</body>
  
</html>

Output:

Browsers Supported:

  • Chrome
  • Edge
  • Opera
  • Safari
  • Internet Explorer (Not Supported).
  • Firefox (Partially supported).

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :