CSS mask-border Property

❮ Previous Reference Next ❯


.example {
/* Standard syntax*/
  30 fill /  /* slice */
  20px /     /* width */
  1px        /* outset */
  round;     /* repeat */

/* Chromium based browser */
-webkit-mask-box-image: url("hello-world.png")
  30 fill /  /* slice */
  20px /     /* width */
  1px        /* outset */
  round;     /* repeat */


The mask-border CSS property create a mask along the edge of an element's border.

The following properties are shorthand of mask-border property:

Note: Chromium-based browsers support an outdated version of this property — -webkit-mask-box-image — with a prefix.

Default value:See individual
JavaScript syntax:

Standard Syntax

mask-border: mask-border-source|mask-border-slice|mask-border-width|mask-border-outset|mask-border-repeat|mask-border-mode|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
mask-border-source The source image.
mask-border-slice The dimensions for slicing the source image into regions. Up to four values may be specified.
mask-border-width The width of the border mask. Up to four values may be specified.
mask-border-outset The distance of the border mask from the element's outside edge. Up to four values may be specified.
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.
mask-border-mode Defines whether the source image is treated as a luminance mask or alpha mask.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  mask-border: See individual;
❮ Previous Reference Next ❯