CSS Masking - mask-border-width Property

The CSS property mask-border-width sets the width of an element's mask border.

The mask-border-width CSS property can be specified as one, two, three, or four values. Following rules are in consideration while applying the value:

  • If one value is specified, the same width is applied to all four sides.

  • If two values are specified, the first width is applied to the top and bottom and the second width to the left and right sides, respectively.

  • If three values are specified, the first width is applied to the top, the second width to the left and right sides, and the third width to the bottom side, respectively.

  • If four values are specified, the widths are applied to the top, right, bottom, and left sides, in the order that is specified (clockwise).

Possible values

The CSS property mask-border-width can have one of the following values:

  • <length-percentage>: The mask border's width is specified as a <length> or a <percentage> value, where percentages are relative to the width of the border area in case of horizontal offsets and height of the border area in case of vertical offsets. Negative values are not valid.

  • <number>: The mask border's width is specified as a multiple of the corresponding border-width. Negative values are not valid.

  • auto: The intrinsic width or height of the corresponding mask-border-slice is set as the width of the mask border. In case the image does not have intrinsic dimension, the corresponding border-width is used.

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-width = [ <length-percentage> | <number> | auto ]{1,4}

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

-webkit-mask-border-width = 20px;

CSS mask-border-width - One Value

The following example demonstrates the use of the CSS property mask-border-width, where an image is passed as the mask border and a width value is specified, which sets the width of the mask border on all the four sides.

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - Two Values

The following example demonstrates the use of the CSS property mask-border-width, where an image is passed as the mask border and two values are passed for width, which sets the width of the top and bottom side by 10px and that of left and right sides by 20px.

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - Three Values

The following example demonstrates the use of the CSS property mask-border-width, where an image is passed as the mask border and three values are passed for width, which sets the width of the top side by 10%, left and right sides by 20px and that of bottom side by 10%.

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - Four Values

The following example demonstrates the use of the CSS property mask-border-width, where an image is passed as the mask border and four values are passed for width, which sets the width of all the sides by 10px.

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>
Advertisements