Skip to content
Related Articles

Related Articles

How to slice image specified by border-image-source in CSS ?
  • Last Updated : 31 Mar, 2021

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 –

  • 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.

Syntax: 



border-image-slice= Number | Percent 
   | fill | Initial | Inherit;

Example:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :