CSS ‘border-image-slice’ Property Explained

The CSS ‘border-image-slice‘ property divides the border image into nine regions: four corners, four edges, and a middle. This slicing tells the browser how to fit the border image around the element. The values define inward offsets from the image’s top, right, bottom, and left edges, enabling the creation of flexible, scalable border designs that adapt to the element’s size.

CSS ‘border-image-slice’ Property Examples

See the Pen CSS ‘border-image-slice’ Property by Webzstore (@webzstore) on CodePen.

The ‘border-image-slice‘ property is essential for detailed control over border images, enabling designers to create complex, adaptive borders that enhance web elements’ visual appeal and functionality.

Browser Support For ‘border-image-slice’ Property

15.0	6.0	15.0	11.0	15.0

CSS Syntax of the ‘border-image-slice’ Property

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

• A single value applies to all four sides.
• Two values set the top and bottom first, then the left and right.
• Three values are set at the top, left and right, and then the bottom.
• Four values specify the top, right, bottom, and left offsets.
• The fill keyword, if used, applies the slice to the element’s background.

Usage of the ‘border-image-slice’ Property

Use ‘border-image-slice‘ when you need to specify how an image is divided and scaled to be used as a border. This is particularly useful for complex or graphical borders that require precise control over how different parts of the image are used for the element’s border. It allows designers to maintain the integrity of the border image’s design while scaling it to fit various element sizes.

Property Values of the ‘border-image-slice’ Property

• Number: Specifies the inward offsets from the edges of the image as a number, which represents pixels if the image is a raster image, or coordinates if the image is a vector image.
• Percentage: Defines the offsets as a percentage of the image’s size.
• Fill: Includes the slice in the middle of the border image area, affecting the element’s background.
• Initial: Resets the ‘border-image-slice‘ to its default value.
• Inherit: Inherits the ‘border-image-slice‘ from the parent element.