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 borderImageOutset Property
The HTML DOM borderImageOutset property is used for setting or returning the value by which background image area extends the element border box. By using values for top, left, right and bottom we can specify how much the background image will extend from respective border of the element.
Syntax
Following is the syntax for −
Setting the borderImageOutset property −
object.style.borderImageOutset = "length|number|initial|inherit"
The property values are explained as follows −
| Value | Description |
|---|---|
| Length | For defining how far the image will extend from the border box. The default value is set to 0 i.e. it doesn’t extend beyond border box. |
| Number | For defining a number value that is multiple of the border-width. |
| Initial | For setting this property to initial value. |
| Inherit | To inherit the parent property value |
Example
Let us look at the example for the borderImageOutset property −
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="The border image outset is now
increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the “Change Border Outset” button −
Updated on: 06-Aug-2019
22 Views
Advertisements