CSS border-image-slice

The border-image-slice CSS property sets the offsets for dividing a border image into nine parts: the four corners, four edges and the middle. The resulting regions fill the border area of the element. The URL of the image to slice is specified by border-image-source.

num%
border-image-slice: offsets
border-image-slice: 20;        /* slice at 20px from each border */
border-image-slice: 10%;       /* 10% of image width/height */
border-image-slice: 4 6 8 10;  /* px offsets for: top right bottom left */
border-image-slice: 4 6;       /* px offsets for: top&bottom right&left */

Pixels are probably the most common. Be sure not to add the "px" units, it's not valid. Up to four values may be provided for top, right, bottom and left offsets respectively. If left is missing, it takes the same value as right. The same is true for bottom and top offsets.

Browser Support: Supported by modern browsers. Internet Explorer introduced support until IE11. See the caniuse.com compatibility table for details.

Usage

The border-image-slice property sets the slicing offsets without changing the rest of the border image properties. The border-image longhand can also be used to set the offsets, along with the rest of the properties.

The offsets are relative to the edges of the image. The slicing is done at the offsets, dividing the image into nine areas as in the example below, which uses the following frame image and offsets:

CSS border-image frame split

The actual frame image is available here.

After the image is sliced, each region is resized to the width set by border-image-width. The offsets have nothing to do with the resulting border's width. The width of each border in the image is passed to border-image-slice:

img.framed {
border: 20px solid #ccb089; border-image-source: url('wooden_frame.jpg'); border-image-slice: 50 65;
}

Slice vs Width

The slice offsets are different from the widths set by border-image-width. The former gives the width just for CSS to know how to divide the image. The latter is the actual displayed width of each edge. CSS takes care of the resizing automatically.

The fill Keyword

The fill keyword may be given after the slice offsets. It simply adds the middle section of the image as a background layer. Take the following image:

CSS Border-Image Zigzag Split

The actual image used is available here.

fill instructs CSS to paint the background area with the middle red section of the image. Without it this middle section would be ignored and the background would look white.

zigzag border!
div.example {
border: 10px solid #cc4242; padding: 15px; background: white; border-image-source: url('zigzag_red.png'); border-image-slice: 10 fill; border-image-repeat: round;
}

Slicing SVGs

SVG graphics are different from "normal" images in that they don't have a specific width and height. While this is a gret advantage, it also means pixel offset won't work the same. What CSS does is resize the image to the width and height of the border image area, for slicing. However, this means the results depend on the element's size, which is usually a bad thing.

Using percentage offsets is probably a better option. They are relative to the image's width (for top and bottom offsets) and height (for left and right). Beware, some browsers did not resize SVGs correctly at the time of writing.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>