The mask-border-source
CSS property sets the source image used to create an element's mask border.
The mask-border-slice
property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
The mask-border-source
CSS property sets the source image used to create an element's mask border.
The mask-border-slice
property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
/* Keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* Global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: revert; mask-border-source: revert-layer; mask-border-source: unset;
none
No mask border is used.
<image>
Image reference to use for the mask border.
Initial value | none |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Computed value | as specified, but with url() values made absolute |
Animation type | discrete |
mask-border-source =
none |
<image>
<image> =
<url> |
<gradient>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask.
mask-border-source: url(image.jpg);
Chromium-based browsers support an outdated version of this property — mask-box-image-source
— with a prefix:
-webkit-mask-box-image-source: url(image.jpg);
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.
Specification |
---|
CSS Masking Module Level 1 # the-mask-border-source |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
mask-border-source |
1 | 79 | NoSee bug 877294. |
No | 15 | 3.1 | 4.4 | 18 | NoSee bug 877294. |
14 | 3 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-source