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 value100%
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs four values, each a number or percentage, and optionally a 'fill' keyword
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.borderImageSlice

Syntax

Formal syntax: [<number> | <percentage>]{1,4} && fill? 

border-image-slice: <number>;
border-image-slice: <percentage>;
border-image-slice: 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

.class {
   border-image-slice: 10%;
}

Browser Support

?Firefox?Explorer?Chrome?Safari?Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.