Related Articles

Related Articles

CSS | border-image-slice Property
  • Difficulty Level : Basic
  • Last Updated : 07 Aug, 2019

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :