Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the width of the left border using CSS
The CSS border-left-width property is used to set the width of the left border of an element. This property only works when the border-left-style or border-style is defined.
Syntax
selector {
border-left-width: value;
}
Possible Values
| Value | Description |
|---|---|
thin |
Defines a thin left border |
medium |
Defines a medium left border (default) |
thick |
Defines a thick left border |
length |
Defines the width in px, em, rem, etc. |
Example
The following example demonstrates how to set different widths for the left border −
<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
border-style: solid;
border-left-width: 5px;
border-color: #ff0000;
padding: 10px;
margin: 10px 0;
}
.example2 {
border-style: dashed;
border-left-width: 15px;
border-color: #00ff00;
padding: 10px;
margin: 10px 0;
}
.example3 {
border-style: dotted;
border-left-width: thick;
border-color: #0000ff;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="example1">This paragraph has a 5px solid red left border.</div>
<div class="example2">This paragraph has a 15px dashed green left border.</div>
<div class="example3">This paragraph has a thick dotted blue left border.</div>
</body>
</html>
Three paragraphs appear with different left border styles: 1. First paragraph with a thin 5px solid red left border 2. Second paragraph with a 15px dashed green left border 3. Third paragraph with a thick dotted blue left border
Conclusion
The border-left-width property provides precise control over the left border thickness. Remember to always define a border style first, as the width property has no effect without it.
Updated on: 2026-03-15T12:11:46+05:30
82 Views
Advertisements