This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-border-slice
CSS property divides the image set by mask-border-source
into regions. These regions are used to form the components of an element's mask border.
The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.
The above diagram illustrates the location of each region.
fill
is set.The mask-border-repeat
, mask-border-width
, and mask-border-outset
properties determine how these regions are used to form the final mask border.
/* All sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* Using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* Global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset;
The mask-border-slice
property may be specified using one to four <number-percentage>
values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to 100%
.
The optional fill
value, if used, can be placed anywhere in the declaration.
<number>
<percentage>
fill
<number-percentage>{1,4} fill?where
<number-percentage> = <number> | <percentage>
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-border-slice' in that specification. | Candidate Recommendation | Initial defintion |
Initial value | 0 |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Percentages | refer to size of the mask border image |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
TBD
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice