Javascript examples for CSS Style Property:borderImageSlice
The borderImageSlice property sets the inward offsets of the image-border.
Value | Description |
---|---|
number | Numbers represent pixels in the image or vector coordinates |
% | 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 | Preserve the middle part of the border-image |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Item | Value |
---|---|
Default Value: | 100% |
Return Value: | A String, representing the border-image-slice property of an element |
CSS Version | CSS3 |
Set the inward offsets of the image-border
<!DOCTYPE html> <html> <head> <style> div//from w w w .j av a 2 s.c om { background-color:lightgrey; border:30px solid transparent; border-image: url('http://java2s.com/resources/a.png'); border-image-slice: 30; border-image-width: 1 1 1 1; border-image-outset: 0; border-image-repeat: 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>