border-image-slice property

Using four inward offsets, this property slices the specified border image into a three by three grid: four corners, four edges, and a center.

CSS Backgrounds and Borders Module Level 3, Section 6

Syntax

border-image-slice: [ <number> | <percentage> ] {1,4} && fill?

Property values

One or more of the following values.

number: Represents distance in pixels of the image for raster images, or vector coordinates for vector images.
percentage: Default. Relative to the size of the image: the width of the image for horizontal offsets, the height of the image for vertical offsets.
fill: If present, preserves the middle portion of the image. Otherwise, the middle is treated as transparent.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	100%

Standards information

CSS Backgrounds and Borders Module Level 3, Section 6

Remarks

The four values slice the image into nine parts, or a 3x3 grid, by defining slice distances from the top, right, bottom, and left of the image. This results in four corners, four edges, and a middle.

In the illustration below, the slicing distances on the image are set at 25% from the top, 10% from the right, 25% from the bottom, and 10% from the left. These slice the image into nine pieces.

An illustration showing slicing distances

Examples

The following examples illustrate different slicing distances using the border-image-slice property.

The example below sets border-image-slice to 100%, which is the default value unless otherwise specified. The following image illustrates the CSS applied to an HTML element.

An HTML element using the default value for border-image-slice.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png"); 
 }

This example illustrates slicing distances at 45% from the top, right, bottom, and left of the image.

An HTML element using 45% for border-image-slice.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png"); 
   border-image-slice: 45%;
}

This example sets slicing distances at 20 pixels from the top and bottom of the image and 15 pixels from the left and right of the image. For this example, instead of using the default border-image-repeat value, round is used. See the image below.

An HTML element using 20 and 15 for slicing distances and round for border-image-repeat.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png"); 
   border-image-slice: 20 15;
   border-image-repeat: round;
}

By default, the middle portion of the image is treated as transparent unless otherwise specified. In the following example, the same border image as the previous examples is used except with a grey background instead of a transparent background. Fill has been specified, so the middle portion of the image is not treated as transparent and the middle portion of the image below is grey.

An image with a grey background.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png"); 
   border-image-slice: 45% fill;
}