border image slice

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS3 border-image-slice Property


Specify how to slice the border image:

#borderimg { 
    border-image-slice: 30;


Definition and Usage

The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.

The "middle" part is treated as fully transparent, unless the fill keyword is set.

CSS Syntax

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

Property Values

Value Description  
number The number(s) represent pixels for raster images or coordinates for vector images  
% Percentages are relative to the height or width of the image  
fill Causes the middle part of the image to be displayed