CSS border-image-slice Property


In CSS the border-image-slice property is used to divide or slice an image specified by border-image-source property.

The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.

The "middle" part is treated as fully transparent, unless the fill keyword is set.

CSS Syntax

border-image-slice: number|%|fill|initial|inherit;

Note: The border-image-slice property can take from one to four values. If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.

Example -