CSS Border-Left-Color Customize Left Border

Introduction

The border-left-color CSS property lets you set the color of an element’s left border. This is useful for customizing the look of your web pages. By adjusting the left border color, you can make specific elements stand out, enhancing the overall design of your site.

Specification

The border-left-color property is defined in the CSS Backgrounds and Borders Module Level 3 specification. This specification provides guidelines on how to use border-related properties in CSS. For more details, check out the official CSS Backgrounds and Borders Module Level 3 specification here.

Syntax

The border-left-color property is simple to use. Here’s the syntax:

border-left-color: color;

• color: This specifies the color of the left border. You can use named colors (e.g., red), hexadecimal values (e.g., #ffbb00), RGB values (e.g., rgb(255, 0, 0)), HSL values (e.g., hsl(100deg, 50%, 25%)), or the currentcolor keyword.

Additionally, you can use global values like inherit, initial, revert, revert-layer, and unset to control inheritance and default behavior.

Values

The border-left-color property accepts various values that define the color of the left border:

• <color>: This value specifies the color of the left border and can be defined using different formats such as named colors (e.g., red), hexadecimal values (e.g., #ffbb00), RGB values (e.g., rgb(255, 0, 0)), HSL values (e.g., hsl(100deg, 50%, 25%)), currentcolor, or transparent.
• Global values: These values control the inheritance and default behavior of the property, such as inherit, initial, revert, revert-layer, and unset.

Examples

Using Named Colors

border-left-color: red;

Using Hexadecimal Values

border-left-color: #ffbb00;

Using RGB Values

border-left-color: rgb(255, 0, 0);

Using HSL Values

border-left-color: hsl(100deg, 50%, 25%);

Using Currentcolor

border-left-color: currentcolor;

Using Transparent

border-left-color: transparent;

Using Global Values

border-left-color: inherit;
border-left-color: initial;
border-left-color: revert;
border-left-color: revert-layer;
border-left-color: unset;

Formal Definition

The border-left-color property in CSS sets the color of the left border of an element. Here are the key characteristics:

• Initial value: The default value is currentcolor, which means the border color will be the same as the text color of the element.
• Applies to: This property applies to all elements, including the ::first-letter pseudo-element.
• Inherited: No, the border-left-color property is not inherited from the parent element.
• Computed value: The computed value is a computed color.
• Animation type: The border-left-color property can be animated as a color, allowing smooth transitions.

Formal Syntax

The formal syntax of the border-left-color property is straightforward:

border-left-color = <color>

Browser Compatibility

The border-left-color property is widely supported across all major web browsers. This ensures that your web designs will be consistent and functional regardless of the browser your users are using. Here is an overview of the browser compatibility:

See Also

For further exploration and understanding of related CSS properties, you may find the following resources useful:

• Border-related CSS shorthand properties:
  • border
  • border-left
  • border-color
• Color-related CSS properties for other borders:
  • border-right-color
  • border-bottom-color
  • border-top-color
• Other border-related CSS properties applying to the same border:
  • border-left-style
  • border-left-width
• Default currentcolor color value:
  • currentcolor

These resources provide additional information and examples that can help you master the use of border-related properties in CSS. By exploring these related properties, you can enhance your web development skills and create more sophisticated and visually appealing web designs.