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

<div>Example of the border-image-slice property</div>
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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
11121515156
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.11815?6X