HTML | DOM Style borderLeftWidth Property
The DOM Style borderLeftWidth property is used to set or return the width of the left border of an element.
Syntax:
- To get the borderLeftWidth Property
object.style.borderLeftWidth
- To set the borderLeftWidth Property
object.style.borderLeftWidth = "thin | medium | thick | length | initial | inherit"
Return Values: It returns a string value, which representing the width of an element’s left border.
Property Values:
- thin: This is used to define a thin left border.
Example-1:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
DOM Style BorderLeftWidth
</
title
>
<
style
>
.elem {
padding: 10px;
border-style: solid;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>
DOM Style BorderLeftWidth
</
b
>
<
p
class
=
"elem"
>
w3wiki 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
=
"changeWidth()"
>
Change BorderLeftWidth
</
button
>
<!-- Script to change BorderLeftWidth -->
<
script
>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = 'thin';
}
</
script
>
</
body
>
</
html
>
Output:
Before clicking the button:
After clicking the button:
- medium: This is used to define a medium left border. This is the default value.
Example-2:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
DOM Style BorderLeftWidth
</
title
>
<
style
>
.elem {
padding: 10px;
border-style: solid;
border-left-width: thin;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>
DOM Style BorderLeftWidth
</
b
>
<
p
class
=
"elem"
>
w3wiki 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
=
"changeWidth()"
>
Change BorderLeftWidth
</
button
>
<!-- Script to change BorderLeftWidth -->
<
script
>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = 'medium';
}
</
script
>
</
body
>
</
html
>
Output:
Before clicking the button:
After clicking the button:
- thick: This is used to define a thick left border.
Example-3:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
DOM Style BorderLeftWidth
</
title
>
<
style
>
.elem {
padding: 10px;
border-style: solid;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>
DOM Style BorderLeftWidth
</
b
>
<
p
class
=
"elem"
>
w3wiki 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
=
"changeWidth()"
>
Change BorderLeftWidth
</
button
>
<!-- Script to change BorderLeftWidth -->
<
script
>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = 'thick';
}
</
script
>
</
body
>
</
html
>
Output:
Before clicking the button:
After clicking the button:
- length: This is used to define the left border width in terms of length units.
Example-4:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
DOM Style BorderLeftWidth
</
title
>
<
style
>
.elem {
padding: 10px;
border-style: solid;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>
DOM Style BorderLeftWidth
</
b
>
<
p
class
=
"elem"
>
w3wiki 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
=
"changeWidth()"
>
Change BorderLeftWidth
</
button
>
<!-- Script to change BorderLeftWidth -->
<
script
>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = '10px';
}
</
script
>
</
body
>
</
html
>
Output:
Before clicking the button:
After clicking the button:
- initial: This is used to set this property to its default value.
Example-5:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
DOM Style BorderLeftWidth
</
title
>
<
style
>
.elem {
padding: 10px;
border-style: solid;
border-left-width: 15px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>
DOM Style BorderLeftWidth
</
b
>
<
p
class
=
"elem"
>
w3wiki 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
=
"changeWidth()"
>
Change BorderLeftWidth
</
button
>
<!-- Script to change BorderLeftWidth -->
<
script
>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = 'initial';
}
</
script
>
</
body
>
</
html
>
Output:
Before clicking the button:
After clicking the button:
- inherit: This inherits the property from its parent.
Example-6:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
DOM Style BorderLeftWidth
</
title
>
<
style
>
#parent {
padding: 10px;
border-style: solid;
border-left-width: 15px;
}
.elem {
padding: 10px;
border-style: solid;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>
DOM Style BorderLeftWidth
</
b
>
<
br
>
<
br
>
<
div
id
=
"parent"
>
<
p
class
=
"elem"
>
w3wiki 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
>
<
br
>
<
button
onclick
=
"changeWidth()"
>
Change BorderLeftWidth
</
button
>
<!-- Script to change BorderLeftWidth -->
<
script
>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = 'inherit';
}
</
script
>
</
body
>
</
html
>
Output:
Before clicking the button:
After clicking the button:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 3.5 and above
- Apple Safari 1 and above
Supported Browsers: The browser supported by borderLeftWidth property are listed below:
Contact Us