Open In App

CSS border-image-slice Property

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
2 Likes
Like
Report

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.

The below image illustrates the regions mentioned above: 

  • The regions 1, 3, 7, and 9 are the corner regions. 
  • The regions 2, 4, 6, and 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: This causes

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, and the height for vertical offsets.
Fill Causes the middle region to be displayed as a background image. 
Initial Initializes the property to its default value. 
Inherit Inherits the value of the property from its parent element. 

The below program illustrates 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(
'http://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(
'http://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(
'http://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(
'http://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(
'http://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 the border-image property are listed below: 

  • Google Chrome 15 and above
  • Edge 12 and above
  • Firefox 15.0 and above
  • Opera 15.0 and above
  • Safari 6.0 and above

D

DannanaManoj
Improve
Article Tags :

Explore

Lightbox