/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile