Skip to content
Related Articles

Related Articles

Improve Article

CSS mask-origin property

  • Last Updated : 01 Oct, 2020
Geek Week

The mask-origin property sets the position of the mask image with respect to different components of the box model.

Syntax:

mask-origin: Keyword values
/* Or */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global values

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

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

Example 1: Below is the example that illustrates the mask-origin property using border-box :




<!DOCTYPE html>
<html>
  
    <head>
        <style>
  
        .geeks{
              width: 22%;
              height: 200px;
              background: green;
              border: 10px solid red;
              padding: 10px;
              color:white;
              -webkit-mask-image: 
              url("image.svg");
              -webkit-mask-repeat:repeat;
              mask-origin: border-box;        
        }
  
        </style>
    </head>
<body>
  
    <div class="geeks"></div>
  
</body>
  
</html>

Output:



Example 2: Below is the example that illustrates the mask-origin property using content-box :




<!DOCTYPE html>
<html>
  
    <head>
        <style>
  
        .geeks{
              width: 22%;
              height: 200px;
              background: green;
              border: 10px solid red;
              padding: 10px;
              color:white;
              -webkit-mask-image: 
              url("image.svg");
              -webkit-mask-repeat:repeat;
              mask-origin: content-box;        
        }
  
        </style>
    </head>
<body>
  
    <div class="geeks"></div>
  
</body>
  
</html>

Output:

Browsers Supported:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :