1. css
  2. /properties
  3. /mask-border-slice

mask-border-slice

Definition

The mask-border-slice property defines the inward offset of the mask border, which is the boundary that clips the content of the element. It is used together with the mask-border-width, mask-border-outset, and mask-border-repeat properties to create a mask border around an element.

Examples

Setting the border slice to a percentage value:

div {
  mask-border-slice: 10%;
  mask-border-width: 5px;
  mask-border-style: solid;
  mask-border-color: black;
}

Setting different border slices for each side:

div {
  mask-border-slice: 10% 20% 30% 40%;
  mask-border-width: 5px;
  mask-border-style: solid;
  mask-border-color: black;
}

Using the fill keyword to fill the mask border with the element's background:

div {
  mask-border-slice: 10%;
  mask-border-width: 5px;
  mask-border-style: solid;
  mask-border-color: black;
  mask-border-mode: alpha; /* enables transparency */
  mask-border-repeat: stretch; /* stretches the mask to fill the element */
  mask-border-source: fill-box; /* uses the element's background as the mask */
  background-color: red;
}

Values

ValueDescription
<length>Defines the inward offset of the mask border as a fixed length value. Can be a positive or negative value.
<percentage>Defines the inward offset of the mask border as a percentage of the mask border width. Can be a positive or negative value.
<number>Same as <length>, but without a unit. Equivalent to specifying the value in pixels.
fillFills the mask border with the element's background color or image.
transparentSets the inward offset of the mask border to be fully transparent.

Best Practices

  • Use the mask-border-width property to set the width of the mask border before setting the mask-border-slice property.
  • Avoid using negative values for the mask-border-slice property, as they may cause unexpected clipping of the element's content.
  • Experiment with different values for the mask-border-repeat property to achieve the desired effect for the mask border.
  • Use the mask-border-outset property to add an outward offset to the mask border, which can create a 3D effect.
  • Keep in mind that the mask-border shorthand property can be used to set all the mask border properties at once.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoNoYes