The borderImageSlice
property
gets and sets the inward offsets of the image-border.
borderImageSlice |
Yes | 11.0 | Yes | 6.0 | No |
Return the borderImageSlice property:
var v = object.style.borderImageSlice
Set the borderImageSlice property:
object.style.borderImageSlice=number|%|fill|initial|inherit
Default Value: | 100% |
---|---|
Return Value: | A string representing the border-image-slice property |
CSS Version | CSS3 |
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: