Open In App

How to slice image specified by border-image-source in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 18 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads