mask-border

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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:

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;

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 valueas each of the properties of the shorthand:
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Percentagesas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Creates stacking contextyes

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:

HTML

<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>

CSS

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.

div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  /* Prefixed longhand properties currently supported in Chromium
    -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png);
    -webkit-mask-box-image-slice: 30 fill;
    -webkit-mask-box-image-width: 20px;
    -webkit-mask-box-image-repeat: round;
    -webkit-mask-box-image-outset: 1px;
  */

  /* Prefixed shorthand property currently supported in Chromium */
  -webkit-mask-box-image: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */
  30 fill /          /* slice */
  20px /             /* width */
  1px                /* outset */
  round;             /* repeat */


  /* Updated standard shorthand property, not supported anywhere yet */
  mask-border:
    url("https://udn.realityripple.com/samples/2d/fd08a3134c.png")  /* source */
    30 fill /        /* slice */
    20px /           /* width */
    1px              /* outset */
    round;           /* repeat */
}

Result

Specifications

Specification Status Comment
CSS Masking Module Level 1
The definition of 'mask-border' in that specification.		 Candidate Recommendation Initial definition

Browser compatibility

TBD