Specify the inward offsets of the image-border:
document.getElementById("myDIV").style.borderImageSlice = "50% 10%";
Click the button to change the value of the borderImageSlice property.
<!DOCTYPE html> <html> <head> <style> div {/*from w ww.j av a2 s . c o m*/ background-color: lightgrey; border: 30px solid transparent; border-image: url('image3.png') 30 1 1 1 1 0 round; } </style> </head> <body> <div id="main"> <p> This is a DIV element that uses an image as a border. </p> </div> <button onclick="myFunction()">Test</button> <script> function myFunction() { document.getElementById("main").style.borderImageSlice = "50% 10%"; } </script> </body> </html>
The borderImageSlice property specifies the inward offsets of the image-border.
Property Values
| Value | Description |
|---|---|
| number | Numbers represent pixels in the image (for raster image) or vector coordinates (for vector image) |
| % | Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. Default value is 100% |
| fill | Causes the middle part of the border-image to be preserved |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The borderImageSlice property Default Value:100%
The borderImageSlice property returns a String, representing the border-image-slice property of an element.