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
- Firefox 15.0
- Safari 6.0
- Internet Explorer 11.0
- Opera 15.0
- HTML | DOM Style borderImageSlice Property
- CSS | transition-property Property
- CSS | right Property
- CSS | all Property
- CSS | top Property
- CSS | columns Property
- CSS | padding-top Property
- CSS | max-width Property
- CSS | flex Property
- CSS | tab-size Property
- CSS | visibility Property
- CSS | grid-row-gap Property
- CSS | min-height Property
- CSS | max-height Property
- CSS | margin-right Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.