files/en-us/web/css/reference/properties/mask-border-source/index.md
The mask-border-source CSS property sets the source image used to create an element's mask border.
The {{cssxref("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
{{cssinfo}}
{{csssyntax}}
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 {{cssxref("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}}
{{Compat}}