border-image-width: value; object.style.borderImageWidth = "value"; <'border-image-width'> = [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4} <length-percentage> = [ <length> | <percentage> ] <length> Specifies the length using a number followed by a unit of measurement.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
<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.
auto Automatically specified by the user agent.
<!doctype html>
<html>
<head>
<style>
p
{
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-image-width: 10px 20px 30px 40px;
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<p>length</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-image-width: 10 20 30 40;
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<p>number</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-image-width: 10% 20% 30% 40%;
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<p>percentage</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(value)" value="10px 20px 30px 40px">length</button>
<button onmouseover="myfunction(value)" value="10 20 30 40">number</button>
<button onmouseover="myfunction(value)" value="10% 20% 30% 40%">percentage</button>
<p>border-image-width</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.borderImageWidth = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button value="10px 20px 30px 40px">length</button>
<button value="10 20 30 40">number</button>
<button value="10% 20% 30% 40%">percentage</button>
<p>border-image-width</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.borderImageWidth = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>