- Trending Categories
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 borderImageWidth Property
The HTML DOM borderImageWidth property is used to set or get the width of the border image for an element.
Following is the syntax for −
Setting the borderImageWidth property −
object.style.borderImageWidth = "number|%|auto|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| length | For describing the border width size in px. |
| number | For describing the border width in multiples of corresponding border width and it’s default value is 1. |
| % | For describing the horizontal offsets and vertical off sets for the border image area width. |
| auto | This sets the width and height corresponding to the image width and height. |
| initial | For setting this property to default value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the borderImageWidth property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 400px;
padding: 25px;
border-style: solid;
border-color: transparent;
border-image-slice: 30;
border-image-source: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini- logo.jpg");
border-image-width: 10px;
}
</style>
<script>
function changeBorderWidth(){
document.getElementById("DIV1").style.borderImageWidth="30px";
document.getElementById("Sample").innerHTML="The border image width is now increased";
}
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>Increase the above div border image width by clicking the below button</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Width” button −
Updated on: 22-Oct-2019
32 Views
Advertisements