borderImageWidth Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderImageWidth

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. borderImageWidth

Description

The borderImageWidth property specifies the widths of the image-border.

Property Values

Value Description
length A length unit (px)
number Default value 1. multiples of the corresponding border-width
% the width of the area for horizontal offsets, the height for vertical offsets
autoIf specified, the width is the intrinsic width or height of the corresponding image slice
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 1
Return Value: A String, representing the border-image-width property of an element
CSS VersionCSS3

Set the widths of the image-border:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//from w w  w  .  j a  v  a2s .c  om
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('http://java2s.com/resources/a.png');
    border-image-slice: 30;
    border-image-width: 10px;
    border-image-outset: 0;
    border-image-repeat: round;
}
</style>
</head>
<body>

<div id="main">
  <p>This is a DIV element that uses an image as a border.</p>
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("main").style.borderImageWidth = "20px 30px";
}
</script>

</body>
</html>

Related Tutorials