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
List with a blue left border using CSS
To add a blue left border to a list in CSS, you can use the border-left property. This creates a visual accent that helps distinguish the list from other content on the page.
Syntax
selector {
border-left: width style color;
}
Example
The following example demonstrates how to add a blue left border to an unordered list −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
border-left: 3px solid blue;
background-color: #f0f0f0;
padding: 10px;
margin: 0;
list-style-position: inside;
}
li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>Countries</p>
<ul>
<li>India</li>
<li>US</li>
<li>Australia</li>
</ul>
</body>
</html>
A list with "Countries" as the heading appears, followed by a bulleted list of India, US, and Australia. The list has a 3px solid blue border on the left side and a light gray background with proper padding.
Conclusion
The border-left property is an effective way to add visual emphasis to lists. Combined with background colors and padding, it creates a clean, professional appearance for your content.
Updated on: 2026-03-15T12:13:30+05:30
258 Views
Advertisements