CSS Property border-image-width
The border-image-width
CSS property sets the border width. It overrides the border-width property.
Summary
- Initial value
- 1
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.borderImageWidth="20px 30px"
- Animatable
- no
CSS Syntax
border-image-width: number|%|auto{1,4};
One-value syntax
border-image-width: all E.g. border-image-width: 3;
Two-value syntax
border-image-width: vertical horizontal E.g. border-image-width: 2em 3em;
Three-value syntax
border-image-width: top horizontal bottom E.g. border-image-width: 5% 15% 10%;
Four-value syntax
border-image-width: top right bottom left E.g. border-image-width: 5% 2em 10% auto;
Property Values
- length
- the width of the border. an absolute or relative length. This length must not be negative.
- percentage
- the width of the border as a percentage of the element. The percentage must not be negative.
- number
- Default value 1. Represents multiples of the corresponding border-width
- auto
- Indicates that the border width/height must be the intrinsic size of that dimension.
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
border-image-width |
Yes | Yes | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from w w w. j av a2s.c o m-->
background-color: lightgrey;
border: 30px solid transparent;
border-image: url('http://java2s.com/style/demo/border.png');
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<div>
This DIV uses an image as a border.
</div>
<p>Here is the image used:</p>
<img src="http://java2s.com/style/demo/border.png">
</body>
</html>