Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the amount by which the border image area extends beyond the border box with JavaScript?
In this tutorial, we will learn how to set the amount by which the border image area extends beyond the border box in JavaScript. To set the amount by which the border image is extended, you need to set the border outside edges. To do this we can apply the borderImageOutset style property provided in JavaScript.
After creating a border image area for the HTML element, we might have to increase the area. By knowing a method to increase the border image area more than the border box, we can make the change without writing lengthy code.
Using the borderImageOutset Property
The borderImageOutset property allows us to set the number to which the border image area extends. This property is also used in CSS as a "border-image-outset" property and provides similar output.
Syntax
We will use the on-click function to change the border image area. There are different property values required in this. We can add one to four values. These values are seen on the border image area's top, right, bottom, and left sides.
If you add only one value, it will be considered the same for all sides. If you add three values, the left side will be considered the same as the right side.
let img = document.getElementById("img");
function(){
img.style.borderImageOutset = "1px 2px 1px 2px";
}
Algorithm
Step 1 ? Create a div or tag in the HTML document to set its border image.
Step 2 ? Set the border image and width in the CSS file.
Step 3 ? Create a button in HTML that can be used to change the border image with the on-click function.
Step 4 ? Use the document.getElementById() method to set a variable name for the element.
Step 5 ? Create the function for the button and set the number using style.borderImageOutset property.
Example 1: Basic Border Image Outset
You can try to run the following code to learn how to set the amount by which the border image extends beyond the border box in JavaScript.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color:gray;
border: 40px solid;
border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
border-image-slice: 50;
border-image-width: 20px;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<div id="box">
<p>Demo Text!</p>
</div>
<button onclick = "display()">Set Border Outside Edges</button>
<script>
function display(){
document.getElementById("box").style.borderImageOutset =
"5px 10px 20px 15px";
}
</script>
</body>
</html>
Example 2: Simplified Border Image Extension
Here we have created an element in HTML to set its border image. Then, we set its border and image specifications in CSS. In JavaScript, we got access to the element using a document.getElementById() method.
To set the number to which the border image area extends, we have used the style.borderImageOutset property in the button's on-click function.
<html>
<head>
<style>
#boximg{
background-color:gray;
border: 30px solid;
border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
}
</style>
</head>
<body>
<h3>Using <i>borderImageOutset</i> property in JavaScript</h3>
<div id = "boximg">
</div>
<button onclick = "border()"> Extend Border Image Area </button>
<script>
let img = document.getElementById("boximg");
function border(){
img.style.borderImageOutset = "2px 2px 70px 5px";
}
</script>
</body>
</html>
Example 3: Using Conditional Logic with borderImageOutset
We have created a border image for the input area in this example. Since every input area requires a different length, you can set the number using borderImageOutset property and if-else statements to ensure the border image area extends when required.
<html>
<head>
<style>
#img{
background-color:gray;
border: 40px solid;
border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
}
</style>
</head>
<body>
<div id = "img">
<button onclick = "borderinc()"> Extend </button>
</div>
<script>
let img = document.getElementById("img");
function borderinc(){
var num = 20;
if(num > 10) {
img.style.borderImageOutset = '10px';
}
else {
img.style.borderImageOutset = '5px';
}
}
</script>
</body>
</html>
Key Points
- The
borderImageOutsetproperty accepts 1-4 values for top, right, bottom, and left sides - Values can be specified in pixels (px) or other CSS units
- One value applies to all sides, while multiple values follow CSS shorthand rules
- This property works alongside other border-image properties for complete styling
Conclusion
The borderImageOutset property provides a powerful way to extend border images beyond their normal boundaries. Use it with conditional logic for dynamic border adjustments based on your application's requirements.
226 Views
