-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
100 lines (68 loc) · 3.26 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
---
title: mask-border-width
slug: Web/CSS/mask-border-width
page-type: css-property
browser-compat: css.properties.mask-border-width
---
{{CSSRef}}
The **`mask-border-width`** [CSS](/en-US/docs/Web/CSS) property sets the width of an element's [mask border](/en-US/docs/Web/CSS/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 {{cssxref("<length>")}} or a {{cssxref("<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 {{cssxref("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 {{cssxref("mask-border-slice")}}. If the image does not have the required intrinsic dimension, the corresponding `border-width` is used instead.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## 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`](/en-US/docs/Web/CSS/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`](/en-US/docs/Web/CSS/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
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("mask-border")}}
- {{cssxref("mask-border-mode")}}
- {{cssxref("mask-border-outset")}}
- {{cssxref("mask-border-repeat")}}
- {{cssxref("mask-border-source")}}