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
Change the color of the left border with CSS
The border-left-color property in CSS allows you to change the color of an element's left border independently from other borders. This property is useful when you want to create visual emphasis or design accents on specific sides of an element.
Syntax
border-left-color: color-value;
Parameters
The property accepts various color values:
- Color names: red, blue, green, etc.
- Hex values: #FF0000, #00FF00, etc.
- RGB values: rgb(255, 0, 0)
- HSL values: hsl(0, 100%, 50%)
Example
<html>
<head>
<style>
p.demo {
border: 3px solid black;
border-left-color: #FF0000;
padding: 10px;
margin: 10px 0;
}
p.demo2 {
border: 2px solid gray;
border-left-color: blue;
padding: 10px;
margin: 10px 0;
}
p.demo3 {
border: 4px solid #ccc;
border-left-color: rgb(0, 128, 0);
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="demo">
Red left border using hex color #FF0000
</p>
<p class="demo2">
Blue left border using color name
</p>
<p class="demo3">
Green left border using RGB values
</p>
</body>
</html>
Common Use Cases
The border-left-color property is commonly used for:
- Creating accent lines for quotes or callout boxes
- Highlighting important content sections
- Building navigation indicators
- Designing card layouts with colored edges
Key Points
- You must have a border defined (using
borderorborder-left) before the color will be visible - The property only affects the left border, leaving other borders unchanged
- Works with all standard CSS color formats
- Can be combined with other border properties for complete customization
Conclusion
The border-left-color property provides precise control over left border styling. Use it to create visual hierarchy and design accents in your web layouts.
Updated on: 2026-03-15T23:18:59+05:30
220 Views
Advertisements