CSS mask-border-source Property

The mask-border-source property specifies the image or paint used specifically for an element’s border mask — in other words, the visual source that will be sliced, stretched, and composited to form a mask that affects only the border region of the box. Unlike a plain mask that applies across the whole box, the value provided by this property is intended to be interpreted like a nine‑patch or “border” image: corners, edges, and the center are conceptually separated so the border can maintain consistent corner shapes while edges tile or stretch as needed. It is commonly used together with the shorthand mask-border, which collects the source together with the other mask-border settings.

When a source is applied via mask-border-source, user agents treat it as the painting to be cut into regions by the corresponding slice and width controls. Those regions determine which parts of the source map to the element’s corners, edges, and (optionally) the middle. How those slices are distributed and scaled is governed by related properties such as mask-border-slice, which defines where the image is partitioned; mask-border-width, which sets how much space the border occupies on the element; and mask-border-repeat, which governs whether edge regions repeat, round, or stretch. Together these properties let you control whether corners stay pixel-perfect or whether the edge artwork repeats to preserve visual rhythm.

Rendering-wise, the image provided by this property becomes a mask — its alpha (and in some cases luminance, depending on the overall mask model) determines the transparency of the element’s border area. That mask is combined with any other masks an element might have, such as those set by the global mask shorthand or by mask-image, following the compositing and stacking rules for CSS masks. Because the border mask only affects the border region, backgrounds and content inside the padding box are not directly masked by it unless additional masks are present or the same source is used elsewhere.

Practically, authors use mask-border-source to create ornate frame effects, soft or feathered edges around borders, or complex cutouts that follow the border shape without altering interior content. For best results and predictable scaling, vector sources (SVG) or high-resolution bitmaps are often preferred so that corners remain sharp at different device pixel ratios. Keep in mind performance and accessibility: using large or many externally fetched images for mask borders can increase paint costs, and masks should not be relied upon to convey essential information unless equivalent non-masked alternatives are provided.