CSS3 border-image-slice Property

Example

Specify the inward offsets of the image-border:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

---

Browser Support

The border-image-slice property is not supported in any of the major browsers.
Look at the border-image property instead!

---

Definition and Usage

The border-image-slice property specifies the inward offsets of the image-border.

Default value:	100%
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.borderImageSlice="50% 50%"

---

Syntax

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

Note: This property specifies the 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. If the fourth number/percentage is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.

Value	Description
number	Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image)
%	Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets
fill	Causes the middle part of the border-image to be preserved +CSS3  +CSSReflex +CSSCHOPPER +CSS Author  +CSSW Yemen-Sana'a  +Css Color +CSSW Yemen-Sana'a +CSS Light +CSS Mobi