HTML DOM Style borderImageSlice Property

The HTML DOM borderImageSlice property is used to define how a border image is divided into regions. This is done by specifying the border image offsets in percentage, number or global values.

Following is the syntax for −

Setting the borderImageSlice property − = "number|%|fill|initial|inherit"

The above properties are explained as follows −

numberIt is used for denoting pixels in a raster image or vector coordinates in a vector image.
%These are used for specifying the horizontal and vertical offsets relative to the picture size. Its default value is 100%.
illIt is used for preserving the border-image middle part.
initialFor setting this property to default value.
inheritTo inherit the parent property value.

Let us look at an example for the borderImageSlice property −


 Live Demo

<!DOCTYPE html>
   div {
      width: 50%;
   #b1 {
      border: 30px solid transparent;
      padding: 5px;
      border-image: url("");
      border-image-slice: 60%;
   function changeBorderSlice(){
      document.getElementById("Sample").innerHTML="The border image slice is now changed";
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>


On clicking the “Change Border Slice” button −

Updated on: 22-Oct-2019


Kickstart Your Career

Get certified by completing the course

Get Started