
- 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 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
You can try to run the following code set in the style of an element’s border with JavaScript −
<!DOCTYPE html> <html> <head> <style> #newDiv { height: 150px; width: 450px; border: 2px solid #000000; } </style> <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
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 an element's border style following the syntax given above.
<html> <head> <style> .bordrStylEl { background-color: #FFFFFF; height: 50px; width: 60px; padding-top: 35px; padding-top: 5px; border: 5px solid blue; text-align: center; float: left; margin-right: 5px; } #bordrStylBtnWrap { margin-top: 10px; float: left; } </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> <br> <div id="bordrStylBtnWrap"> <br /> <p> Click the button to set different styles to an element's border. </p> <button onclick="setBorderStyle();"> Set </button> </div> <br> </body> <script> function setBorderStyle() { var bordrStylBtnWrap = document.getElementById("bordrStylBtnWrap"); 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
In this program, we are setting an element's border style to a single div element. We get an element's border style from the user.
When the user presses the button, we call the function to set an element's border style following the syntax given above.
<html> <head> <style> #bordrStylUsrEl { background-color: #FFFFFF; border: 5px solid purple; text-align: center; } </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> <br> <div id="bordrStylUsrBtnWrap"> <select id="bordrStylUsrSel" size="10"> <option/> dotted <option/> dashed <option/> double <option/> groove <option/> inset <option/> none <option/> hidden <option/> outset <option/> ridge <option selected = "selected"/> solid <option/> inset <option/> outset </select> <br><br> <p> Provide the border style and click on the button. </p> <button onclick="setBorderStyle();"> Set </button> </div> <br> </body> <script> function setBorderStyle() { var bordrStylUsrSelTag = document.getElementById("bordrStylUsrSel"); var bordrStylUsrSelIndx = bordrStylUsrSelTag.selectedIndex; var bordrStylUsrSelStat = bordrStylUsrSelTag.options[bordrStylUsrSelIndx].text; var bordrStylUsrBtnWrap = document.getElementById("bordrStylUsrBtnWrap"); 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>
In this tutorial, we went through the borderStyle property in JavaScript. The borderStyle property is a built-in option in JavaScript to set the style of an element's border and is very easy to code.
- Related Articles
- 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 style of the bottom border with JavaScript?
- How to set the style of the left border with JavaScript?
- How to set border width, border style, and border color in one declaration with JavaScript?
- How to set the color of an elements border with JavaScript?
- Set the style of the border with CSS
- How to set the width of an element's border with JavaScript?
- How to set the style of the outline around an element with JavaScript?
- How to set the widths of the image 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 color of the right border with JavaScript?
