CSS border-image-slice Property

Description

The border-image-slice property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the 'fill' keyword is present.

Initial value: 100%
Applies to: All elements
Inherited: No
Media: Visual
Computed value: As four values, each a number or percentage, and optionally a 'fill' keyword
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.borderImageSlice

Syntax

border-image-slice: [<number> | <percentage>]{1,4} && fill?

Values

<number>Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image).
<percentage>Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.
fillThe 'fill' keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

Example

HTML

<div>Example of the border-image-slice property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result