
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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 a number up 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
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 Oustside Edges</button> <script> function display(){ document.getElementById("box").style.borderImageOutset = "5px 10px 20px 15px"; } </script> </body> </html>
Example 2
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 if, else statements with borderImageOutset Property
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 and 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> <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>
The above-mentioned examples are commonly used in JavaScript to set a number up to which border image area extends beyond the box in JavaScript. You can use borderImageOutset with other properties to change the element's style in JavaScript.
- Related Articles
- How to set the widths of the image border with JavaScript?
- How to set the inward offsets of the image border with JavaScript?
- How to set the image to be used as a border with JavaScript?
- Set the border image width with CSS
- Set the width of image border with CSS
- How to offset an outline and draw it beyond the border edge with JavaScript?
- How to set the style of the top border with JavaScript?
- How to set the style of the right border with JavaScript?
- How to set the width of the right border with JavaScript?
- How to set the width of the left border with JavaScript?
- How to set the color of the top border with JavaScript?
- How to set the width of the bottom border with JavaScript?
- How to set the style of the bottom border with JavaScript?
- How to set the color of the right border with JavaScript?
- How to set the width of the top border with JavaScript?
