mask-border-width
The mask-border-width CSS property specifies offsets that are used to divide the mask border image area into nine parts.
CSS
mask-border-width: value;
JS
object.style.maskBorderWidth = "value";
Values
<'mask-border-width'> = [ <length-percentage> | <number> | 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.
Initial
auto
length
<!doctype html>
<html>
<head>
<style>
div {
border-color: yellow;
border-style: solid;
border-width: 20px;
mask-border-slice: 33.33%;
mask-border-source: url(/assets/png/9Slice.png);
mask-border-width: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>length</div>
</body>
</html>
number
<!doctype html>
<html>
<head>
<style>
div {
border-color: yellow;
border-style: solid;
border-width: 20px;
mask-border-slice: 33.33%;
mask-border-source: url(/assets/png/9Slice.png);
mask-border-width: 10 20 30 40;
}
</style>
</head>
<body>
<div>number</div>
</body>
</html>
percentage
<!doctype html>
<html>
<head>
<style>
div {
border-color: yellow;
border-style: solid;
border-width: 20px;
mask-border-slice: 33.33%;
mask-border-source: url(/assets/png/9Slice.png);
mask-border-width: 10% 20% 30% 40%;
}
</style>
</head>
<body>
<div>percentage</div>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
div {
border-color: yellow;
border-style: solid;
border-width: 20px;
mask-border-slice: 33.33%;
mask-border-source: url(/assets/png/9Slice.png);
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.maskBorderWidth = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<button onmouseover="mouseover(value)" value="10px 20px 30px 40px">length</button>
<button onmouseover="mouseover(value)" value="10 20 30 40">number</button>
<button onmouseover="mouseover(value)" value="10% 20% 30% 40%">percentage</button>
<div>mask-border-width</div>
</body>
</html>
Internal
External