CSS | border-image-slice Property
In CSS the border-image-slice property is used to divide or slice an image specified by border-image-source property.
The border-slice property divides a given image into:
- 9 regions
- 4 corners
- 4 edges
- A middle region.
Note: The middle region remains transparent as default and fill value is used to make it opaque/translucent.
Below image illustrate the regions mentioned above:
- The regions 1, 3, 7, 9 are the corner regions.
- The regions 2, 4, 6, 8 are the edge regions.
- The region 5 is the middle region.
|Number||Represents an edge offset in pixels for raster images and coordinates for vector images.(See:vector vs raster graphics)||Percentage||Represents an edge offset as a percentage of the source image’s size: the width of the image for horizontal offsets, the height for vertical offsets.||Fill||Causes the middle region to be displayed as a background image.||Initial||Initialises the property to its default value.||Inherit||Inherits the value of the property from it’s parent element.|
Below program illustrate the border-image-slice Property:
Supported Browser: The browser supported by border-image property are listed below:
- Google Chrome 16.0
- Internet Explorer 11.0
- Firefox 15.0
- Opera 15.0
- Safari 6.0
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.