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 widths of the image border with JavaScript?
In this tutorial, we shall learn to set the widths of the image border with JavaScript. To set the widths of the image border, use the borderImageWidth property in JavaScript.
When we need an image as a border of our webpage content, we have to see how to set the width of the image border.
Using the Style borderImageWidth Property
With the Style borderImageWidth property, we can set or return the widths of the image border of an element.
The border image will range beyond the padding when the border image width is greater than the border width.
We can establish one, two, three, or four values for the borderImageWidth property:
If there is only one value, it applies to all four sides.
When two values are available, the first value sets the 'top and bottom,' and the second value sets the 'left' and the 'right'.
If there will be three values then the first value sets the top, the second sets both 'left' and the 'right,' and the third set the bottom.
When four values are present, the top, right, bottom, and left take the respective value in order.
Syntax
object.style.borderImageWidth = "length|number|%|auto|initial|inherit";
Parameters
length ? A length unit in pixels defining the size of the border-width.
number ? Defines multiples of the corresponding border-width.
% ? Defines the size of the border image width for horizontal offsets and the height for vertical offsets.
auto ? The width is the intrinsic width or height of the respective image.
initial ? Sets this property to its default value.
inherit ? Inherits this property from its parent element.
The default value of the given property is 1. The return value is a string representing the image border width.
Example 1: Basic Border Image Width Setting
In the below example, we set the widths of the image border using the borderImageWidth property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:gray;
border: 40px solid;
border-image:
url('/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 Width</button>
<script>
function display(){
document.getElementById("box").style.borderImageWidth = "20px 30px";
}
</script>
</body>
</html>
Example 2: Interactive Border Width Selection
In this program, we are setting the image border width to a div element. We get the image border width from the user:
<html>
<head>
<style>
#imgBrdrWdthUsrEl {
border: 15px solid transparent;
padding: 10px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 20;
border-image-width: 20px;
}
</style>
<script>
function setImageBorderWidth() {
var imgBrdrWdthUsrSelTag = document.getElementById("imgBrdrWdthUsrSel");
var imgBrdrWdthUsrSelIndx = imgBrdrWdthUsrSelTag.selectedIndex;
var imgBrdrWdthUsrSelStat = imgBrdrWdthUsrSelTag.options[imgBrdrWdthUsrSelIndx].text;
var imgBrdrWdthUsrBtnWrap = document.getElementById("imgBrdrWdthUsrBtnWrap");
var imgBrdrWdthUsrEl = document.getElementById("imgBrdrWdthUsrEl");
imgBrdrWdthUsrEl.style.borderImageWidth = imgBrdrWdthUsrSelStat;
imgBrdrWdthUsrEl.innerHTML = "You have set the image border width to <b>" + imgBrdrWdthUsrEl.style.borderImageWidth + "</b>";
}
</script>
</head>
<body>
<h2>Set the widths of the image border using the <i> borderImageWidth </i>property.</h2>
<p id ="imgBrdrWdthUsrEl"> Image border. </p>
<br>
<div id ="imgBrdrWdthUsrBtnWrap">
<select id ="imgBrdrWdthUsrSel">
<option/> 5px
<option/> 5px 10px;
<option selected ="selected"/> 5px 10px 15px
<option/> 5px 10px 15px 20px
<option/> 5 10 15 20
<option/> 1% 2% 3% 4%
<option/> auto
<option/> initial
<option/> inherit
</select>
<br><br>
<p> Choose the image border width and click on the button. </p>
<button onclick ="setImageBorderWidth();"> Change </button>
</div>
<br>
</body>
</html>
Example 3: Multiple Elements with Different Border Widths
We set different image border widths in this example on multiple paragraph tags:
<html>
<head>
<style>
#imgBrdr1{
border: 10px solid #000000;
padding: 20px;
border-image:
url("/images/neo4j.png");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 0px;
background-color: lavender;
}
#imgBrdr2{
border: 10px solid #000000;
padding: 20px;
border-image:
url("/images/neo4j.png");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 0px;
background-color: pink;
}
#imgBrdr3{
border: 10px solid #000000;
padding: 20px;
border-image:
url("/images/neo4j.png");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 0px;
background-color: lavender;
}
#imgBrdr4{
border: 10px solid #000000;
padding: 20px;
border-image:
url("/images/neo4j.png");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 0px;
background-color: pink;
}
</style>
<script>
function setMultImageBorderWidth(){
var imgBrdrWdthBtnWrap =
document.getElementById("imgBrdrWdthBtnWrap");
var imgBrdrWdthEl1 = document.getElementById("imgBrdr1");
imgBrdrWdthEl1.style.borderImageWidth = "7px";
imgBrdrWdthEl1.innerHTML = "border-image-width - <b>" +
imgBrdrWdthEl1.style.borderImageWidth + "</b>";
var imgBrdrWdthEl2 = document.getElementById("imgBrdr2");
imgBrdrWdthEl2.style.borderImageWidth = "8px";
imgBrdrWdthEl2.innerHTML = "border-image-width - <b>" +
imgBrdrWdthEl2.style.borderImageWidth + "</b>";
var imgBrdrWdthEl3 = document.getElementById("imgBrdr3");
imgBrdrWdthEl3.style.borderImageWidth = "9px";
imgBrdrWdthEl3.innerHTML = "border-image-width - <b>" +
imgBrdrWdthEl3.style.borderImageWidth + "</b>";
var imgBrdrWdthEl4 = document.getElementById("imgBrdr4");
imgBrdrWdthEl4.style.borderImageWidth = "10px";
imgBrdrWdthEl4.innerHTML = "border-image-width - <b>" +
imgBrdrWdthEl4.style.borderImageWidth + "</b>";
}
</script>
</head>
<body>
<h3> Set the widths of multiple image borders using the
<i> borderImageWidth </i>property.
</h3>
<p id ="imgBrdr1"> </p>
<p id ="imgBrdr2"> </p>
<p id ="imgBrdr3"> </p>
<p id ="imgBrdr4"> </p>
<div id ="imgBrdrWdthBtnWrap">
<p> Click on the button to view different border image widths on
the color boxes </p>
<button onclick ="setMultImageBorderWidth();"> View </button>
</div>
</body>
</html>
Conclusion
The borderImageWidth property in JavaScript provides a built-in solution to control image border widths dynamically. It's flexible, supporting various value formats and easy to implement in web applications.
541 Views
