CSS border-left-color Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-left-color property in CSS allows you to specify the color of the left border of an element.

This property is useful when you want to individually style the left border of an element without affecting the other borders. It is often used in conjunction with other border properties to create a custom look for your web elements.

💡 Syntax

The syntax for the border-left-color property is simple. You apply it directly to an element, specifying a color value.

Syntax

Copied

element {
  border-left-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value for the border-left-color property is the color of the element's text (currentcolor). If not specified, it inherits the color of the element's color property.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
transparent	The border will be transparent, meaning it will not be visible.

📄 Example

In this example, we'll change the left border color of a div element to red.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-left-color Example</title>
  <style>
    div {
      border: 5px solid black;
      border-left-color: red;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Left Border Color</h1>
  <div>
    This is a div with a red left border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-left-color property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in older browsers, making it a reliable choice for styling your web elements.

🎉 Conclusion

The border-left-color property is a versatile tool for customizing the appearance of an element's left border. By specifying a different color for the left border, you can add a unique visual element to your design. Combine this property with other border properties to achieve the desired effect and enhance the overall look of your web pages.