borderImageSource Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderImageSource

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

Description

The borderImageSource property sets or gets the border image URL.

Property Values

Value Description
noneNo image for border
image image URL
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Set an image as the border around a div element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div//from w w  w  .j a v  a2  s . com
{
background-color:lightgrey;
border:30px solid transparent;
border-image: url('http://java2s.com/resources/a.png');
border-image-slice: 30;
border-image-width: 1 1 1 1;
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>

<p>Here are the two images used:</p>
<img src="http://java2s.com/resources/a.png">
<img src="http://java2s.com/resources/c.png">


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

<script>
function myFunction()
{
    document.getElementById("main").style.borderImageSource = "url('http://java2s.com/resources/c.png')";
}
</script>

</body>
</html>

Related Tutorials