mask-border-slice

The mask-border-slice CSS property divides the image set by mask-border-source into regions. These regions are used to form the components of an element’s mask border.

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

!The nine regions defined by the border-image or border-image-slice properties

The above diagram illustrates the location of each region.

Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image. Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword fill is set.

Syntax example: mask-border-slice: 30%;