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
- HTML | DOM Style borderImageSlice Property
- CSS | transition-property Property
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- CSS | table-layout Property
- CSS | text-align Property
- CSS | border-top-width Property
- CSS | isolation Property
- CSS | border-inline-start-style Property
- CSS | column-rule-width Property
- CSS | word-spacing Property
- CSS | animation-delay Property
- CSS | margin-top Property
- CSS | border radius property
- CSS | grid Property
- CSS | font-size-adjust Property
- CSS | visibility Property
- CSS | Display property
- CSS | grid-template-columns Property
- CSS | height 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.