mask-border
Quick Summary for mask-border
mask-border
CSS shorthand property lets you create a mask along the edge of an element's border.
Code Usage for mask-border
/* 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: unset;
More Details for mask-border
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
/* 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: 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 imagemask-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 specifiedmask-border-outset : as specified, but with relative lengths converted into absolute lengthsmask-border-repeat : as specifiedmask-border-slice : as specifiedmask-border-source : as specified, but with url() values made absolutemask-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 : discretemask-border-outset : discretemask-border-repeat : discretemask-border-slice : discretemask-border-source : discretemask-border-width : discrete |
Creates stacking context | yes |
Formal syntax
<'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:
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 |
See also
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-source
mask-border-width
Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語中文 (简体) Change language