The DOM Style borderStyle property is used to set or return the border style of an element.
Syntax:
object.style.borderStyle
object.style.borderStyle = "none | hidden | dotted | dashed |
solid | double | groove | ridge | inset | outset | initial |
inherit"
Return Values: It returns a string value, which representing the style of an element’s border.
Property Values: Each property value with the example.
Value | Effect |
---|
none | No border is created. This is the default value. |
hidden | Visually same as ‘none’, except it helps during border conflict resolution in table elements. |
dotted | Dots are used as the border. |
dashed | A dashed line is used as the border. |
solid | A single solid line is used as the border. |
double | Two lines are used as the border. |
groove | A 3D grooved border is displayed. The effect depends on border-color value. |
ridge | A 3D ridged border is displayed. The effect depends on border-color value. |
inset | A 3D inset border is displayed. The effect depends on border-color value. |
outset | A 3D outset border is displayed. The effect depends on border-color value. |
initial | Sets the property to its initial value. |
inherit | Sets the property to inherit from its parent. |
These values are demonstrated with the below examples:
Example-1: Using the none value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well written
and explained computer science and
programming articles, quizzes and
interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'none';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-2: Using the hidden value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'hidden';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-3: Using the dotted value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes
and interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'dotted';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-4: Using the dashed value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer
science and programming articles,
quizzes and interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'dashed';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-5: Using the solid value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px dotted green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'solid';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-6: Using the double value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'double';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-7: Using the groove value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'groove';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-8: Using the ridge value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes
and interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'ridge';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-9: Using the inset value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'inset';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-10: Using the outset value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px inset green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'outset';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-11: Using the initial value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< p class="item">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</ p >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'initial';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example-12: Using the inherit value.
html
<!DOCTYPE html>
< html lang="en">
< head >
< title >
DOM Style borderStyle Property
</ title >
< style >
#parent {
border-style: dotted;
padding: 10px;
}
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style borderStyle Property
</ b >
< div id="parent">
< p class="item">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
</ p >
</ div >
< button onclick="changeBorderStyle()">
Change style
</ button >
< script >
function changeBorderStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderStyle = 'inherit';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by borderStyle property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 3.5
- Apple Safari 1