CSS3 `border-image-slice` Property

Example

Specifies the inward offset of the border image:

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property	Chrome	IE	Firefox	Safari	Opera
border-image-slice	15.0	11.0	15.0	6.0	15.0

Property Definition and Usage

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

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

Syntax

Note: This property specifies the inward offsets for the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges, and the middle. The middle part of the image is discarded (treated as fully transparent) unless the fill keyword is used. If the fourth number/percentage is omitted, it is the same as the second. If the third is also omitted, it is the same as the first. If the second is also omitted, it is the same as the first.

Value	Description
number	Number represents image pixels (for bitmap images) or coordinates (for vector images)
%	Percentage relative to the image size: horizontal offset relative to the image width, vertical offset relative to the image height
fill	Retains the middle part of the image

❮ Pr Gen Quotes Css3 Pr Animation Timing Function ❯

CSS3 border-image-slice Property

Example

Browser Support

Property Definition and Usage

Syntax

CSS3 `border-image-slice` Property