How to slice image specified by border-image-source in CSS ?
In this article, we will see how to add border image as slice image using CSS. To make the border slice image, the border-image-slice property is used. This property divide or slice an image specified by border-image-source property.
The border-image-slice property divides a given image into –
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- 9 regions
- 4 corners
- 4 edges
- A middle region
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.
border-image-slice= Number | Percent | fill | Initial | Inherit;