CSS border-image-slice Property

Last Updated : 11 Jul, 2025

In CSS the border-image-slice property is used to divide or slice an image specified by border-image-source property.
The border-slice property divides a given image into:

9 regions
4 corners
4 edges
A middle region.

Note: The middle region remains transparent as default and fill value is used to make it opaque/translucent.

The below image illustrates the regions mentioned above:

👁 Image

The regions 1, 3, 7, and 9 are the corner regions.
The regions 2, 4, 6, and 8 are the edge regions.
The region 5 is the middle region.

Syntax:

border-image-slice= value;

Default Value: Its default value is 100%.

Property values: This causes

Value	Effect/Functionality
Number	Represents an edge offset in pixels for raster images and coordinates for vector images. (See: vector vs raster graphics)
Percentage	Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, and the height for vertical offsets.
Fill	Causes the middle region to be displayed as a background image.
Initial	Initializes the property to its default value.
Inherit	Inherits the value of the property from its parent element.