border-image-slice

Summary

Divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inward offsets.

Overview table

Initial value: 100%
Applies to: all elements, except internal table elements when border-collapse is set to collapse.
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: borderImageSlice
Percentages: refer to size of the border image

Syntax

border-image-slice: <number>
border-image-slice: <percentage>
border-image-slice: fill
border-image-slice: inherit

Values

<number>: Represents pixels for raster images and coordinates for vector images.
<percentage>: Percentages values are relative to the height or width of the image, whichever is adequate.
fill: Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
inherit: Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border-image-slice properties applied to them.

<div class="pattern one">one</div>
<div class="pattern two">two</div>
<div class="pattern three">three</div>
<div class="pattern four">four</div>

View live example

/**
*   Border-image-slice Live Example
*   @see /docs/css/properties/border-image-slice
*/

/* General setup of the containers */
div {
    height: 100px;
    width: 100px;
    margin: 25px;
    text-align: center;
    line-height: 100px;
    font-family: sans-serif;
}

/* This general class will apply the pattern to the containers */
.pattern {
    border-image-source: url(/docs/w/images/d/d8/border-image.png);
    border-image-width: 6;
    border-image-outset: 3;
    border-image-repeat: repeat;

}

/* One-value syntax */
.pattern.one{
    border-image-slice: 30;
}

/* Two-value syntax */
.pattern.two{
    border-image-slice: 30 20;
}

/* Three-value syntax */
.pattern.three{
    border-image-slice: 20 15 30;
}

/* Four-value syntax */
.pattern.four{
    border-image-slice: 25 20 30 15;
}

View live example

Usage

 * Up to four different values can be specified, in the following order: top, right, bottom, left.

If one value is specified, it is used for all four sides. If two values are specified, the first is used for the top and bottom slice-lines, and the second is used for left and right sides. If three values are specified, they are used for top, right/left, and bottom slice-lines, respectively. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

Related specifications

CSS Level 3 - Backgrounds and Borders Module: W3C Candidate Recommendation

Attributions

Mozilla Developer Network : Article