Search within TutorialsPark

CSS border-image-slice Property


To set the offset for slicing the image


Definition and Notes.

1. The CSS border-image-slice property is used to specify the slice distance, which is an offset from the top,right,bottom and left edges of border-image.

2. The image is divided into nine regions, which is 8 parts of elements border and elements background area.


Syntax:

CSS border-image-slice property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note: The centre part of the image is discarded, but even that can be preserved using fill keyword fill as a sides value.

Property Values

Value Description
number To denote number of pixels of the image.
% To specify the horizontal and vertical offset as a percentage of the image.
fill To make the middle part of the image retained.

Specifications

Specs Value
Name border-image-slice
Value [<number> | <percentage>] {1,4} && fill?
Initial Value 100%
Applies to All elements except table element where border-collapse is collapse
Javascript syntax object.style.borderImageSlice="30% 40%"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.