Javascript Reference - HTML DOM Style borderImageSlice Property








The borderImageSlice property gets and sets the inward offsets of the image-border.

Browser Support

borderImageSlice Yes 11.0 Yes 6.0 No

Syntax

Return the borderImageSlice property:

var v = object.style.borderImageSlice 

Set the borderImageSlice property:

object.style.borderImageSlice=number|%|fill|initial|inherit

Property Values

number
represents pixels for raster images and coordinates for vector images.
percentage
values relative to the height or width of the image, whichever is adequate.
fill
forces middle image slice to be displayed over the background image
initial
sets to default value
inherit
Inherits this property from its parent element




Technical Details

Default Value: 100%
Return Value: A string representing the border-image-slice property
CSS Version CSS3

Example

The following code shows how to set the inward offsets of the image-border.


<!DOCTYPE html>
<html>
<head>
<style> 
div<!--from   ww  w .j a v a 2  s .c  o  m-->
{
    background-color:lightgrey;
    border:30px solid transparent;
    border-image: url('http//:java2s.com/style/demo/border.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 test. This is a test. This is a test.
This is a test. This is a test. This is a test.
</p>
</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction(){
    document.getElementById("main").style.borderImageSlice = "50% 10%";
}
</script>
</body>
</html>

The code above is rendered as follows: