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
11	12	15	15	15	6
Tablets / Mobile
4.4	18	15	14	6	1.0

Last updated by CSSPortal on: 12th October 2019