border-image-outset
The border-image-outset CSS property specify the amount by which the border image area extends beyond the border box.
CSS
border-image-outset: value;
JS
object.style.borderImageOutset = "value";
Values
<'border-image-outset'> = [ <length [0,∞]> | <number [0,∞]> ]{1,4}
<length>
Specifies the length using a number followed by a unit of measurement.
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
Initial
length
number
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
border-image-outset: 2;
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
margin: 40px;
}
</style>
</head>
<body>
<p>number</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
margin: 40px;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.borderImageOutset = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="initial">
<button onmouseover="mouseover(value)" value="40px">length</button>
<button onmouseover="mouseover(value)" value="2">number</button>
<p>border-image-outset</p>
</body>
</html>
Internal
External