mask-border-width
=================

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

Syntax
------


```css
/\* Keyword value \*/
mask-border-width: auto;

/\* <length> value \*/
mask-border-width: 1rem;

/\* <percentage> value \*/
mask-border-width: 25%;

/\* <number> value \*/
mask-border-width: 3;

/\* top and bottom | left and right \*/
mask-border-width: 2em 3em;

/\* top | left and right | bottom \*/
mask-border-width: 5% 15% 10%;

/\* top | right | bottom | left \*/
mask-border-width: 5% 2em 10% auto;

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


The `mask-border-width` property may be specified using one, two, three, or four values chosen from the list of values below.

* When **one** value is specified, it applies the same width to **all four sides**.
* When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length-percentage>`

The width of the mask border, specified as a `<length>` or a `<percentage>`. Percentages are relative to the *width* of the border area for horizontal offsets and the *height* of the border area for vertical offsets. Must not be negative.

`<number>`

The width of the mask border, specified as a multiple of the corresponding `border-width`. Must not be negative.

`auto`

The width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding `mask-border-slice`. If the image does not have the required intrinsic dimension, the corresponding `border-width` is used instead.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | relative to width/height of the mask border image area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

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

mask-border-width =   
  [ <length-percentage> | <number> | auto ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to `mask-border-slice` will cause the slices to be scaled to fit the border mask.


```css
mask-border-width: 30 fill;
```


Chromium-based browsers support an outdated version of this property — `mask-box-image-width` — with a prefix:


```css
-webkit-mask-box-image-width: 20px;
```


**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

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

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

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

See also
--------

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