Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style borderImageSource Property
The HTML DOM borderImageSource property is used for setting or returning the source of the image to be used as border image for an element.
Following is the syntax for −
Setting the borderImageSource property −
object.style.borderImageSource = "none|image|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| None | This means no image will be used. It will apply border styles if they are specified. |
| Image | For giving the path of the image to be used as border. The path to the image to be used as a border |
| ill | It is used for preserving the border-image middle part. |
| Initial | For setting this property to default value. |
| Inherit | To inherit the parent property value. |
Let us look at an example for the borderImageSource property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
border-image-slice: 30;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url('http://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Image” button −
In the above example −
We have created a div with id “DIV1” that has the corresponding css style applied to it and contains some text in it. We have specified the border image using the border-image-source property in the css style and specified the image url as property value −
#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg ");
border-image-slice: 30;
}
<div id="DIV1">This is some sample text inside div</div>We then created a button “Change Border Image” that will execute the changeBorderImage() method on being clicked by the user −
<button onclick="changeBorderImage()">Change Border Image</button>
The changeBorderImage() gets the DIV1 element by using the getElementById() method and gets its borderImageSource property value. It then assigns it the image url by assigning the url value in url method. It then displays the intended message indicating this change in the paragraph with id “Sample” using its innerHTML property −
function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url(''http://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
39 Views
