How to slice image specified by border-image-source in CSS ?
In this article, we will see how to add a border image as a slice image using CSS. To make the border slice image, the border-image-slice property is used. This property divides or slices an image specified by the border-image-source property.
The border-image-slice property divides a given image into –
- 9 regions
- 4 corners
- 4 edges
- A middle region
The below image illustrates 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.
Syntax:
border-image-slice= Number | Percent | fill | Initial | Inherit;
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html><head> <title> How to slice the image specified by border-image-source in CSS? </title> <style> body { text-align: center; } h1 { color: green; } .border1 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: 30; border-image-width: 20px; } .border2 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: 30%; border-image-width: 20px; } .border3 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: fill; border-image-width: 20px; } div { margin-top: 20px; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> How to slice the image specified by border-image-source in CSS? </h2> <div class="border1">Border 1</div> <div class="border2">Border 2</div> <div class="border3">Border 3</div></body></html> |
Output:
Please Login to comment...