This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



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
Applies to
all elements, except internal table elements when border-collapse is set to collapse.
Computed value
as specified
CSS Object Model Property
refer to size of the border image


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


Represents pixels for raster images and coordinates for vector images.
Percentages values are relative to the height or width of the image, whichever is adequate.
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.
Is a keyword indicating that all four values are inherited from their parent’s element calculated value.


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 */{
    border-image-slice: 30;

/* Two-value syntax */
    border-image-slice: 30 20;

/* Three-value syntax */
    border-image-slice: 20 15 30;

/* Four-value syntax */
    border-image-slice: 25 20 30 15;

View live example


 * 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


Other articles


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