HTML Dog
Skip to navigation

CSS Property: border-image-slice

Cuts an image into portions to be used as the corners and edges of a border image.

Splits an image into nine sections: four corners, four edges, and a middle bit. This is done by slicing the image along four straight lines, one inwardly offset from the top, one from the right, one from the bottom, and one from the left.

Possible Values

ValueDescriptionExample
[percentage]Top, right, bottom, and left offset. Calculated in relation to the dimensions of the image. Should not be negative.25%
[number]Top, right, bottom, and left offset. Equates to pixels for raster images or coordinates for vector images. Should not be negative.13
[value] [value]First value is top and bottom offset. Second value is right and left offset.25% 10%
[value] [value] [value]First value is top offset. Second value is right and left offset. Third value is bottom offset.13 30 7
[value] [value] [value] [value]First value is top offset. Second value is right offset. Third value is bottom offset. Fourth value is left offset.25% 10% 5% 15%
[values] fillThe middle portion is preserved and drawn over the background. If fill is not present, the middle portion will be discarded.13 30 7 1 fill
inherit
initial
unset

Example


aside {
    border: 10px solid fuchsia;
    border-image-source: url("fluffy.png");
    border-image-slice: 13 30 7 1;
}
/* - Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
   - Top slice is 13 pixels in from the top edge of the image.
   - Right slice is 30 pixels in from the right edge of the image.
   - Bottom slice is 7 pixels in from the bottom edge of the image.
   - Left slice is 1 pixel in from the left edge of the image.
   - Middle portion is discarded (because fill is not present) */

Browser support

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.