Skip to content
Related Articles

Related Articles

CSS | border-image-slice Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 07 Jun, 2022

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: 
 

ValueEffect/Functionality
NumberRepresents an edge offset in pixels for raster images and coordinates for vector images.(See:vector vs raster graphics)
PercentageRepresents 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: 
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(
                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;
            }
            .border4 {
                border: 10px solid transparent;
                padding: 15px;
                border-image-source: url(
                border-image-repeat: round;
                border-image-slice: initial;
                border-image-width: 20px;
            }
            .border5 {
                border: 10px solid transparent;
                padding: 15px;
                border-image-source: url(
                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 15 and above
  • Edge 12 and above
  • Internet Explorer 11.0 and above 
  • Firefox 15.0 and above
  • Opera 15.0 and above
  • Safari 6.0 and above
     

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!