CSS Masking - mask-border-repeat Property

The CSS property mask-border-repeat determines how the edges of the source image are adjusted to fit the dimensions of an element's mask border.

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

  • If one value is specified, it is applied to all four sides.

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

Possible values

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

  • stretch: The edges of the source image are stretched in order to fill the gap between each border.

  • repeat: The edges of the source image are repeated (tiled) in order to fill the gap between each border. To properly fit the edges, the source image may get clipped as well.

  • round: The edges of the source image are repeated (tiled) in order to fill the gap between each border. To properly fit the edges, the source image may get stretched as well.

  • repeat: The edges of the source image are repeated (tiled) in order to fill the gap between each border. To properly fit the edges, the extra space will be distributed evenly in between the tiles.

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-repeat = [ stretch | repeat | round | space ] {1,2}

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

-webkit-mask-border-repeat = repeat;

CSS mask-border-repeat - space Value

The following example demonstrates the use of the CSS property mask-border-repeat, where an image is passed as the mask border and the repeat value is specified as space which distributes the extra space evenly between the borders, in order to adjust the tiles for a proper fit.

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

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

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

CSS mask-border-repeat - round Value

The following example demonstrates the use of the CSS property mask-border-repeat, where an image is passed as the mask border and the repeat value is specified as round where the tiles are stretched, in order to adjust the tiles for a proper fit.

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

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

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

CSS mask-border-repeat - stretch Value

The following example demonstrates the use of the CSS property mask-border-repeat, where an image is passed as the mask border and the repeat value is specified as stretch where the source image's edges are stretched for a proper fit.

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

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

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

CSS mask-border-repeat - repeat Value

The following example demonstrates the use of the CSS property mask-border-repeat, where an image is passed as the mask border and the repeat value is specified as repeat where the source image's edges are repeated such that, for a proper fit, the edges are clipped.

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

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

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