CSS | border-image-slice Property

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;

Property values:

Value Effect/Functionality
Number Represents an edge offset in pixels for raster images and coordinates for vector images.(See:vector vs raster graphics)
Percentage Represents 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>    

chevron_right


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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.