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: