CSS Property: border-image-width
[this page | pdf | back links]
The CSS (CSS3) border-image-width property specifies the
width of a border image.
The property takes up to
four values. If the fourth is omitted then it is given the same value as the
second. If the third is omitted then it is given the same value as the first.
If the second is also omitted then it is given the same value as the first.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
length
|
CSS length specifying size
of border-width
|
|
number
|
(default value).
Multiples of corresponding border-width
|
|
%
|
Relative to size of
border image area
|
|
auto
|
Intrinsic width or
height of the corresponding image slice
|
|
Default Value:
|
1
|
|
JavaScript syntax:
|
e.g. object.style.borderImageWidth="50px"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {
border: 10px solid transparent;
border-image: url('NematrianLogo.png') 10 round;
padding: 15px;
}
.border1 {border-image-width: 2px 3px;}
</style>
</head>
<body>
<p>1. url('NematrianLogo.png') 100% 1 .2 repeat;</p>
<p class="border1">2. different border-image-width property</p>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderImageWidth() {
var x = document.createElement("DIV"); x.style.borderImageWidth = "2px 3px"; return (window.getComputedStyle(x, null).borderImageWidth == "2px 3px");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties