CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
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%;
}
{
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 |
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
