CSS | border-image-slice Property - GeeksforGeeks

03 Nov, 2021
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.  
Syntax:  
border-image-slice= value;
Default Value : Its default value is 100%.
Property values:  
Below program illustrate the border-image-slice Property: Example:  
HTML
<!DOCTYPE html><html>    <head>        <title>            CSS | border-image-slice Property        </title>        <style>            body {                text-align:center;            }            h1 {                color:green;            }                         .border1 {                border: 10px solid transparent;                padding: 15px;                border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);                border-image-repeat: round;                border-image-slice: 30;                border-image-width: 20px;            }            .border2 {                border: 10px solid transparent;                padding: 15px;                border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);                border-image-repeat: round;                border-image-slice: 30%;                border-image-width: 20px;            }            .border3 {                border: 10px solid transparent;                padding: 15px;                border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);                border-image-repeat: round;                border-image-slice: fill;                border-image-width: 20px;            }            .border4 {                border: 10px solid transparent;                padding: 15px;                border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);                border-image-repeat: round;                border-image-slice: initial;                border-image-width: 20px;            }            .border5 {                border: 10px solid transparent;                padding: 15px;                border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);                border-image-repeat: round;                border-image-slice: inherit;                border-image-width: 20px;            }                     div {                margin-top:20px;            }        </style>    </head>    <body>        <h1>GeeksforGeeks</h1>        <h2>border-image-slice property</h2>        <div class = "border1">Border 1</div>        <div class = "border2">Border 2</div>        <div class = "border3">Border 3</div>        <div class = "border4">Border 4</div>        <div class = "border5">Border 5</div>    </body></html>   
Output:  
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 HTML concepts with the Web Design for Beginners | HTML  course.
ManasChhabra2
CSS-Properties
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property