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 6IE11

 

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 ToAll elements
Mediavisual
Inheritedno
Initial Value100%

Standards information

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.


#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.


#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.


#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.


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

See also

CSSStyleDeclaration
border-image
border-image-outset
border-image-repeat
border-image-source
border-image-width

 

 

Show:
© 2014 Microsoft