CSS - mask-origin Property

Quiz

CSS mask-origin property defines the origin of the mask image. This property provides the mask positioning area for elements displayed as a single box, meaning, it specifies the origin position of an image determined by the mask-image CSS property.

Syntax

mask-origin: border-box | content-box | padding-box | fill-box | stroke-box | view-box | initial | inherit;

Property Values

Value	Description
content-box	It sets the origin of the mask image relative to the outer edge of the content box.
padding-box	It sets the origin of the mask image relative to the outer edge of the padding box.
border-box	It sets the origin of the mask image relative to the outer edge of the border box. Default.
fill-box	It sets the origin of the mask image relative to the object bounding box.
stroke-box	It sets the origin of the mask image relative to the stroke bounding box.
view-box	The SVG viewport serves as the reference box. SVG elements with a `viewBox` attribute position their content at the `viewBox` origin, with dimensions defined by the `viewBox` width and height.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Origin Property

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

Mask Origin Property with Content Box Value

To position a mask relative to the content area of the element, excluding padding, border, and margin, we use the content-box value. The mask is applied starting from the inner edge of the content area where the element's actual content is displayed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: content-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: content-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

Mask Origin Property with Padding Box Value

To position a mask relative to the padding area of the element, which includes the content and any padding around it, we use the padding-box value. It allows the mask to cover both the content and padding areas but excludes the border and margin. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: padding-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: padding-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

Mask Origin Property with Border Box Value

To position a mask relative to the border area of the element, consisting of the content, padding, and border areas, we use the border-box value. The mask extends to the outer edge of the border box, excluding only the margin. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: border-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: border-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

Mask Origin Property with Fill Box Value

To position a mask relative to the fill area of an SVG element, we use the fill-box value. This box includes the area covered by the fill of an SVG shape or text, and it ignores the padding, border, or margin. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: fill-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: fill-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

Supported Browsers

Property
mask-origin	120	120	53	15.4	106

css_reference.htm

Print Page