This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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 http://docs.webplatform.org/wiki/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(http://docs.webplatform.org/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

See also

Related articles

Border

Other articles

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article