CSS border-image-slice Property

border-image-slice sets how a border image is sliced.

There are 9 slices: four corners, four edges, and the middle.

Example

#

A border with a border-image-slice of 40%.

Element with border image slice setting
<style>
  .border-image-slice-40 {
    border: 20px solid transparent;
    padding: 15px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
    border-image-slice: 40%;
  }
</style>

<div class="border-image-slice-40">
  Element with border image slice setting
</div>

Syntax

border-image-slice: number | % | 
                    fill | initial | inherit;

Values

#

Value Description
number Number(s) represent pixels for raster images or coordinates for vector images
% Percentages are relative to the height or width of the image
fill Displays image middle part
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-image-slice values.

Element with border image slice setting
<style>
  .border-image-slice-example {
    border: 20px solid transparent;
    padding: 15px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
    border-image-slice: 10;
  }
</style>

<div class="border-image-slice-example">
  Element with border image slice setting
</div>

Browser support

This table shows when border-image-slice support started for each browser.

Chrome
15.0 Oct 2011
Firefox
15.0 Aug 2012
IE/Edge
11.0 Oct 2013
Opera
15.0 May 2013
Safari
6.0 Jul 2012

You may also like

Guides