CSS Masking - mask-border-outset Property

The CSS property mask-border-outset specifies the distance through which the element's mask border is set away from the border box.

The mask-border-outset CSS property can be specified as one, two, three, or four values. Each value is a <length> or <number>. Negative values are not allowed and considered as invalid. Following rules are in consideration while applying the value:

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

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

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

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

Possible values

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

  • <length>: The mask border outset is specified as a dimension in length unit.

  • <number>: The mask border outset is specified as a multiple of the corresponding border-width.

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

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

-webkit-mask-border-outset = 3.5rem;

CSS mask-border-outset - Basic Example

The following example demonstrates the use of the CSS property mask-border-outset, where an image is passed as the mask border and an outset value is specified which adds a distance between the image and the mask border.

<html>
<head>
<style>
   * {
      box-sizing: border-box;
   }

   .with-mask{
      -webkit-mask-box-image-source: url("images/border.png");
      -webkit-mask-box-image-slice: 80;
      -webkit-mask-box-image-width: 120px;  
      -webkit-mask-box-image-repeat: round;
      -webkit-mask-box-image-outset: 3.5rem;

      -webkit-mask-border-source: url("images/border.png");
      -webkit-mask-border-slice: 80;
      -webkit-mask-border-width: 120px;
      -webkit-mask-border-outset: 3.5rem; 
      -webkit-mask-border-repeat: round;
      -webkit-mask-border-mode: alpha;
   }
</style>
</head>
<body>
   <h1>The mask-border-outset Property</h1>

   <h3>With mask-border-outset</h3>
   <div class="with-mask">
   <img src="images/scenery.jpg" alt="mask border image" width="300" height="200">
   </div>
</body>
</html>
Advertisements