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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at his company, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website