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:

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `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 `mask-border-source`.

`<'mask-border-slice'>`

The dimensions for slicing the source image into regions. Up to four values may be specified. See `mask-border-slice`.

`<'mask-border-width'>`

The width of the border mask. Up to four values may be specified. See `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 `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 `mask-border-repeat`.

`<'mask-border-mode'>`

Defines whether the source image is treated as a luminance mask or alpha mask. See `mask-border-mode`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `mask-border-mode`: `alpha`
* `mask-border-outset`: `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source`: `none`
* `mask-border-width`: `auto`
 |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `mask-border-slice`: refer to size of the mask border image
* `mask-border-width`: relative to width/height of the mask border image area
 |
| Computed value | as each of the properties of the shorthand:* `mask-border-mode`: as specified
* `mask-border-outset`: as specified, but with relative lengths converted into absolute lengths
* `mask-border-repeat`: as specified
* `mask-border-slice`: as specified
* `mask-border-source`: as specified, but with `url()` values made absolute
* `mask-border-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `mask-border-mode`: discrete
* `mask-border-outset`: discrete
* `mask-border-repeat`: discrete
* `mask-border-slice`: discrete
* `mask-border-source`: discrete
* `mask-border-width`: discrete
 |
| Creates stacking context | yes |

Formal syntax
-------------
```

mask-border =   
  <'mask-border-source'>                              ||  
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||  
  <'mask-border-repeat'>                              ||  
  <'mask-border-mode'>                                  
  
```

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:

![The image used for the mask examples on this page. The mask is a transparent square with three rows of three diamonds each. The diamonds are a very light, almost white, shade of grey. The middle part between the diamonds is also solid grey. The parts between the outside of the diamonds and the edge of the image are transparent.](/en-US/docs/Web/CSS/mask-border/mask-border-diamonds.png)

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.

Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`