CSS border-image-slice Property
Example
Specify how to slice the border image:
#borderimg {
border-image-slice: 30%;
}
border-image-slice: 30%;
}
Definition and Usage
The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.
The "middle" part is treated as fully transparent, unless the fill keyword is set.
Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties).
| Default value: | 100% |
|---|---|
| Inherited: | no |
| Animatable: | no. |
| Version: | CSS3 |
| JavaScript syntax: | object.style.borderImageSlice="30%" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
border-image-sliceis applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS Syntax
border-image-slice: number|%|fill|initial|inherit;
Note: The border-image-slice property can take from one to four values. (top line, right line, bottom line, left line for slicing images into 9 sections i.e. four corners, four edges and one center)
- If the fourth value is omitted, it is the same as the second. (30px 10px 30px is same as 30px 10px 30px 10px)
- If the third one is also omitted, it is the same as the first. (30px 10px is same as 30px 10px 30px 10px)
- If the second one is also omitted, it is the same as the first. (30px is same as 30px 30px 30px 30px)
Property Values
| Value | Description | Play it |
|---|---|---|
| number | The number(s) represent pixels for raster images or coordinates for vector images | |
| % | Percentages are relative to the height or width of the image | |
| fill | Causes the middle part of the image to be displayed | |
| initial | Sets this property to its default value. | |
| inherit | Inherits this property from its parent element. |
Comments
Post a Comment