HTML | DOM Style borderLeftStyle Property
Last Updated :
09 Sep, 2022
The Style borderLeftStyle property in HTML DOM is used to set or return the left border style of an element.
Syntax:
- It returns the borderLeftStyle property.
object.style.borderLeftStyle
- It is used to set the borderLeftStyle property.
object.style.borderLeftStyle = "none|hidden|dotted|dashed|solid|
double|groove|ridge|inset|outset|initial|inherit"
Property Values:
Value |
Effect |
none |
No border is created. It is the default value. |
hidden |
It is same as ‘none’ property, 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 |
It sets the property to its initial value. |
inherit |
It sets the property to inherit from its parent. |
Return Values: It returns a string value, which representing the style of an element’s left border.
Example 1: This example describes none property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'none';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 2: This example describes hidden property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'hidden';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 3: This example describes dotted property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'dotted';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 4: This example describes dashed property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'dashed';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 5: This example describes solid property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px dotted green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'solid';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 6: This example describes double property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'double';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 7: This example describes groove property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'groove';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 8: This example describes ridge property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'ridge';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 9: This example describes inset property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'inset';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 10: This example describes outset property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px inset green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'outset';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 11: This example describes initial property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'initial';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Example 12: This example describes inherit property value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style borderLeftStyle Property
</ title >
< style >
#parent {
border-left-style: dotted;
padding: 10px;
}
.item {
padding: 10px;
border: 15px solid green;
}
</ style >
</ head >
< body >
< h1 style="color: green">GeeksforGeeks</ h1 >
< b >DOM Style borderLeftStyle 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.borderLeftStyle = 'inherit';
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by DOM Style borderLeftStyle property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 5.5
- Firefox 1
- Apple Safari 1
- Opera 9.2
Share your thoughts in the comments
Please Login to comment...