{"id":375796,"date":"2022-12-20T06:03:17","date_gmt":"2022-12-20T14:03:17","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=375796"},"modified":"2022-12-20T08:00:25","modified_gmt":"2022-12-20T16:00:25","slug":"border-image-slice","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-slice\/","title":{"rendered":"border-image-slice"},"content":{"rendered":"\n

The CSS border-image-slice<\/code> tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s borders.<\/p>\n\n\n\n

.element {\n  border-style: ridge;\n  border-width: 3rem;\n  border-image-source: url('path\/to\/image.jpg');\n  border-image-slice: 30%;\n  border-image-repeat: repeat; \n}<\/code><\/pre>\n\n\n\n
The border-image-slice<\/code> property is defined in the CSS Backgrounds and Borders Module Level 3 specification<\/a>.<\/p>\n\n\n\n\n\n\n\n
When the border image is sliced, it is divided into nine sections \u2014 the four corners, the four sides, and the middle \u2014 by drawing four invisible slice lines over the image that form regions sort of like a grid. The property values offset that grid of slice lines from the image\u2019s respective sides.<\/p>\n\n\n\n