CSS Masking - mask-border-slice Property

The CSS property mask-border-slice divides the source image into regions. The regions that the source image is divided in is useful in forming the components of the mask border.

The mask-border-slice CSS property can be specified as one to four values. Each value is a <number-percentage>. Negative values are not allowed and considered as invalid and values greater than their corresponding dimension is clamped to 100%. Following rules are in consideration while applying the value:

  • If one value / position is specified, all four slices at the same distance from their corresponding sides, is created.

  • If two values / positions are specified, the first value creates slice from the top and bottom and the second value creates slice from the left and right sides, respectively.

  • If three values / positions are specified, the first value creates slice from the top, the second value creates slice from the left and right sides, and the third value value creates slice from bottom side, respectively.

  • If four values / positions are specified, they create slices from the top, right, bottom, and left sides, in the order that is specified (clockwise).

Note: The value fill is optional and can be used at any place in the declaration.

In total, nine regions are created by the slicing process, which is, four corners, four edges, and a middle region. The four slices lines are responsible for setting a given distance from their corresponding sides and controlling the size of the regions. Refer the following diagram for location of each region:

mask border slice

The diagram illustrated above, shows various zones.

  • Zone 1-4 are the corner regions. Each of these regions is used once to form the corners of the final border image.

  • Zone 5-8 are the edge regions. Each of these regions is repeated, scaled, or modified in the final border image to match the element's dimensions.

  • Zone 9 is the middle region. By default it is discraded, but it used to set the background image, when the keyword fill is applied.

The properties mask-border-repeat, mask-border-width, and mask-border-outset, determine how these regions are applied to form the final mask border.

Possible values

The CSS property mask-border-slice can have following values:

  • <number>: For raster images, the edge offset is represented in pixels and for vector images, it is coordinates. The number is relative to the element's size , and not to the size of the source image, in case of vector images. Hence percentage values are preferred in such cases.

  • <percentage>: The edge offset of the source image's size is represented in percentage values; where the width of the image is for the horizontal offsets and height of the image is for the vertical offsets.

  • fill: The middle region is preserved. The width and height of the image is sized such that it matches the top and left image regions, respectively.

Applies to

All HTML elements. And in case of SVG, it applies to the container element excluding the <defs> element and all graphics elements

Syntax

mask-border-slice = [ <number> | <percentage> ] {1,4} fill?

Note: The chromium-based browsers support the old version of this property mask-box-image-slice with a prefix, i.e., -webkit.

-webkit-mask-border-slice = 20 fill;

CSS mask-border-slice - Basic Example

The following example demonstrates the use of the CSS property mask-border-slice, where an image is passed as the mask border and is sliced based upon the number-percentage values passed.

<html>
<head>
<style>
   .with-mask {
      -webkit-mask-box-image: url("images/logo.png")
        30 10% /          /* slice */
        10px /             /* width */
        2px                /* outset */
        space;            /* repeat */
      
   
      mask-border: url("images/logo.png")
        30 10% /        /* slice */
        10px /           /* width */
        2px              /* outset */
        space;          /* repeat */
  }
</style>
</head>
<body>
   <h1>The mask-border-slice Property</h1>

   <h3>With mask-border-slice</h3>
   <div class="with-mask">
   <img src="images/orange-flower.jpg" alt="mask border image" width="300" height="200">
   </div>

   <h3>Without mask-border-slice</h3>
   <img src="images/orange-flower.jpg" alt="mask border image" width="300" height="200">
</body>
</html>
Advertisements