mask-border

The mask-border CSS shorthand property lets you create a mask along the edge of an element's border.

Constituent properties

This property is a shorthand for the following CSS properties:

{{cssxref("mask-border-mode")}}
{{cssxref("mask-border-outset")}}
{{cssxref("mask-border-repeat")}}
{{cssxref("mask-border-slice")}}
{{cssxref("mask-border-source")}}
{{cssxref("mask-border-width")}}

Syntax

css

/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

/* Global values */
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: revert-layer;
mask-border: unset;

Values

<'mask-border-source'>
- : The source image. See {{cssxref("mask-border-source")}}.
<'mask-border-slice'>
- : The dimensions for slicing the source image into regions. Up to four values may be specified. See {{cssxref("mask-border-slice")}}.
<'mask-border-width'>
- : The width of the border mask. Up to four values may be specified. See {{cssxref("mask-border-width")}}.
<'mask-border-outset'>
- : The distance of the border mask from the element's outside edge. Up to four values may be specified. See {{cssxref("mask-border-outset")}}.
<'mask-border-repeat'>
- : Defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask. Up to two values may be specified. See {{cssxref("mask-border-repeat")}}.
<'mask-border-mode'>
- : Defines whether the source image is treated as a luminance mask or alpha mask. See {{cssxref("mask-border-mode")}}.

Formal definition

Formal syntax

Examples

Setting a bitmap-based mask border

In this example, we will mask an element's border with a diamond pattern. The source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:

To match the size of a single diamond, we will use a value of 90 divided by 3, or 30, for slicing the image into corner and edge regions. A repeat value of round will make the mask slices fit evenly, i.e., without clipping or gaps.

html

<div class="masked">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>

css-nolint

.masked {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  -webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /          /* slice */
    20px /             /* width */
    1px                /* outset */
    round;             /* repeat */

  mask-border:
    url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /        /* slice */
    20px /           /* width */
    1px              /* outset */
    round;           /* repeat */
}