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. When the browser doesn’t know how to do this, it simply places the image in the corners. We saw this in the previous assignment.

The border-image-slice property sets the margins 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 these margins are small, then we are able to slice the image into 9 pieces, which are then placed in the corresponding areas of the frame.

But if the margins are too large (more than half of the image), then the browser is not able to obtain the 9 pieces and places what was sliced in the corners.

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%;