Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)
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.
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. 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.CSS 'border-image-slice' Property Examples
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;
Usage of the 'border-image-slice' Property
Property Values of the 'border-image-slice' Property
"*" indicates required fields