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

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