CSS border-image-slice attribute

Definition and Usage

The border-image-slice property specifies the inward offset of the image border.

See also:

CSS3 Tutorial:CSS3 Borders

Example

Specifies the inward offset of the image border:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS Syntax

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

Note:This property specifies the inward offset of the top, right, bottom, and left edges of the image, dividing the image into nine areas: four corners, four sides, and a central area. Unless the keyword fill is used, the central part of the image will be discarded. If the fourth value/percentage is omitted, it is the same as the second value. If the third value is omitted, it is the same as the first value. If the second value is omitted, it is the same as the first value.

Property Value

Value Description
number Numeric values representing pixels in the image (if it is a raster image) or vector coordinates (if it is a vector image).
% Percentage values relative to the image size: the width affects the horizontal offset, and the height affects the vertical offset.
fill Retain the middle part of the border image.

Technical Details

Default Value: 100%
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.borderImageSlice="50% 50%"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

See also border-image Property.