The DOM Style borderLeftWidth property is used to set or return the width of the left border of an element.
Syntax:
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">
GeeksforGeeks
</h1>
<b>
DOM Style BorderLeftWidth
</b>
<p class="elem">
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="changeWidth()">
Change BorderLeftWidth
</button>
<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">
GeeksforGeeks
</h1>
<b>
DOM Style BorderLeftWidth
</b>
<p class="elem">
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="changeWidth()">
Change BorderLeftWidth
</button>
<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">
GeeksforGeeks
</h1>
<b>
DOM Style BorderLeftWidth
</b>
<p class="elem">
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="changeWidth()">
Change BorderLeftWidth
</button>
<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">
GeeksforGeeks
</h1>
<b>
DOM Style BorderLeftWidth
</b>
<p class="elem">
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="changeWidth()">
Change BorderLeftWidth
</button>
<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">
GeeksforGeeks
</h1>
<b>
DOM Style BorderLeftWidth
</b>
<p class="elem">
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="changeWidth()">
Change BorderLeftWidth
</button>
<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">
GeeksforGeeks
</h1>
<b>
DOM Style BorderLeftWidth
</b>
<br>
<br>
<div id="parent">
<p class="elem">
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>
<br>
<button onclick="changeWidth()">
Change BorderLeftWidth
</button>
<script>
function changeWidth() {
elem = document.querySelector('.elem');
elem.style.borderLeftWidth = 'inherit';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by borderLeftWidth property are listed below:
- 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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
14 Jul, 2022
Like Article
Save Article