Frame Image: border-image-slice

Let’s see how the mechanism for slicing the background image for the frame works.

Each frame has 9 areas: 4 corners, 4 borders, and a center area. To fill these areas, the browser must slice the image for the frame into 9 pieces. With the default slice values, only the corners are visible in this example. We saw this in the previous assignment.

The border-image-slice property sets the distances as measured from the edges of the image to the four lines that are used to slice it into parts, as in the diagram on the right. If the opposite slicing lines leave room between them, then we are able to slice the image into 9 pieces, which are then placed in the corresponding areas of the frame.

But if opposite slices meet or overlap, the corresponding side regions and the center are empty; the corner regions remain.

The property value can be set as a number without a unit (it is usually denoted in pixels) or as a percentage (relative to the size of the image itself). Example:

border-image-slice: 60;
border-image-slice: 10%;