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 style of an element's border with JavaScript?
In this tutorial, we shall learn to set the style of an element's border with JavaScript. To set the style of an element's border, use the borderStyle property in JavaScript.
Let us discuss the borderStyle property available in detail.
Using the borderStyle Property
With the borderStyle property, we can set or return the style of an element's border.
Syntax
Following is the syntax to use the borderStyle property to set the style of an element's border with JavaScript ?
object.style.borderStyle = style;
This syntax allows us to set the required border style to the element's style. We will see the available style values below.
Parameters
none ? Sets no border.
hidden ? Similar to "none". Unique to table element border issues.
dotted ? Sets a dotted border.
dashed ? Sets a dashed border.
solid ? Sets a solid border.
double ? Sets two borders. The total width is equal to the border width.
groove ? Sets a 3-D grooved border. The effect is dependent on the color.
ridge ? Sets a 3-D ridged border. The effect is dependent on the color.
inset ? Sets a 3-D inset border. The effect is dependent on the color.
outset ? Sets a 3-D outset border. The effect is dependent on the color.
initial ? Sets this property to the default value.
inherit ? Inherits this property from its parent element.
The default value for the property is none. The return value is a string representing the border style.
Example 1: Basic Border Style Change
You can try to run the following code to set the style of an element's border with JavaScript ?
<!DOCTYPE html>
<html>
<head>
<style>
#newDiv {
height: 150px;
width: 450px;
border: 2px solid #000000;
padding: 20px;
}
</style>
</head>
<body>
<div id="newDiv">
Demo Content!
</div>
<br>
<button type="button" onclick="display()">Change border style</button>
<script>
function display() {
document.getElementById("newDiv").style.borderStyle = "dashed";
}
</script>
</body>
</html>
Example 2: Multiple Border Styles
In this program, we are setting different border styles to multiple div elements.
When the user presses the button, we call the function to set different element border styles following the syntax given above.
<html>
<head>
<style>
.bordrStylEl {
background-color: #FFFFFF;
height: 50px;
width: 60px;
padding: 35px 5px;
border: 5px solid blue;
text-align: center;
float: left;
margin-right: 5px;
}
#bordrStylBtnWrap {
margin-top: 10px;
float: left;
clear: both;
}
</style>
</head>
<body>
<h3> Setting the style of an element's border using the<i> borderStyle </i> property.
</h3>
<div class="bordrStylEl" id="bordrStylEl1"> Border 1 </div>
<div class="bordrStylEl" id="bordrStylEl2"> Border 2 </div>
<div class="bordrStylEl" id="bordrStylEl3"> Border 3 </div>
<div class="bordrStylEl" id="bordrStylEl4"> Border 4 </div>
<div id="bordrStylBtnWrap">
<p> Click the button to set different styles to element borders. </p>
<button onclick="setBorderStyle();"> Set </button>
</div>
</body>
<script>
function setBorderStyle() {
var bordrStylEl1 = document.getElementById("bordrStylEl1");
var bordrStylEl2 = document.getElementById("bordrStylEl2");
var bordrStylEl3 = document.getElementById("bordrStylEl3");
var bordrStylEl4 = document.getElementById("bordrStylEl4");
bordrStylEl1.style.borderStyle = "dashed";
bordrStylEl2.style.borderStyle = "solid";
bordrStylEl3.style.borderStyle = "dotted";
bordrStylEl4.style.borderStyle = "double";
bordrStylEl1.innerHTML = "<b> dashed </b>";
bordrStylEl2.innerHTML = "<b> solid </b>";
bordrStylEl3.innerHTML = "<b> dotted </b>";
bordrStylEl4.innerHTML = "<b> double </b>";
}
</script>
</html>
Example 3: Interactive Border Style Selector
In this program, we are setting an element's border style to a single div element. We get the element's border style from the user's dropdown selection.
When the user selects a style and presses the button, we call the function to set the element's border style following the syntax given above.
<html>
<head>
<style>
#bordrStylUsrEl {
background-color: #FFFFFF;
border: 5px solid purple;
text-align: center;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<h3>Setting the style of an element's border using the <i> borderStyle</i> property.
</h3>
<div id="bordrStylUsrEl"> Set the border style here. </div>
<div id="bordrStylUsrBtnWrap">
<select id="bordrStylUsrSel" size="10">
<option>dotted</option>
<option>dashed</option>
<option>double</option>
<option>groove</option>
<option>inset</option>
<option>none</option>
<option>hidden</option>
<option>outset</option>
<option>ridge</option>
<option selected="selected">solid</option>
</select>
<br><br>
<p> Select a border style and click the button. </p>
<button onclick="setBorderStyle();"> Set </button>
</div>
</body>
<script>
function setBorderStyle() {
var bordrStylUsrSelTag = document.getElementById("bordrStylUsrSel");
var bordrStylUsrSelIndx = bordrStylUsrSelTag.selectedIndex;
var bordrStylUsrSelStat = bordrStylUsrSelTag.options[bordrStylUsrSelIndx].text;
var bordrStylUsrEl = document.getElementById("bordrStylUsrEl");
bordrStylUsrEl.style.borderStyle = bordrStylUsrSelStat;
bordrStylUsrEl.innerHTML = "You have set the element's border style to <b>" +
bordrStylUsrEl.style.borderStyle + "</b>";
}
</script>
</html>
Conclusion
The borderStyle property in JavaScript provides a simple way to dynamically change element border styles. Use element.style.borderStyle to set values like "solid", "dashed", or "dotted" for interactive web applications.
1K+ Views
