mask-border-outset: value; object.style.maskBorderOutset = "value"; <'mask-border-outset'> = [ <length> | <number> ]{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.
<!doctype html>
<html>
<head>
<style>
div
{
border-color: yellow;
border-style: solid;
border-width: 20px;
margin: 40px;
mask-border-outset: 2;
mask-border-slice: 33.33%;
mask-border-source: url(/assets/svg/9Slice.svg);
}
</style>
</head>
<body>
<div>number</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
border-color: yellow;
border-style: solid;
border-width: 20px;
margin: 40px;
mask-border-slice: 33.33%;
mask-border-source: url(/assets/svg/9Slice.svg);
}
</style>
</head>
<body>
<button>initial</button>
<button value="40px">length</button>
<button value="2">number</button>
<div>mask-border-outset</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector("div").style.maskBorderOutset = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>