1. css
  2. /properties
  3. /border-left-color

border-left-color

Definition

In CSS, the border-left-color property sets the color of the left border of an element. It can be set to a color value, such as red, a predefined color keyword, such as blue, or a hexadecimal value, such as #0000FF.

Examples

Set the left border of the element with the class "box" to red.

.box {
  border-left-color: red;
}

Set the left border of the element with the class "box" to blue, using the hexadecimal value for blue.

.box {
  border-left-color: #0000FF;
}

Set the left border of the element with the class "box" to red, with an opacity of 50%. The rgba value allows you to specify the red, green, blue, and alpha (opacity) values for a color.

.box {
  border-left-color: rgba(255, 0, 0, 0.5);
}

Values

ValueDescription
color-nameA predefined color keyword, such as red, green, or blue.
#hex-colorA six-digit hexadecimal color value, such as #FF0000 for red or #0000FF for blue.
rgb(red, green, blue)An RGB color value, where red, green, and blue are integers between 0 and 255.
rgba(red, green, blue, alpha)An RGBA color value, where red, green, and blue are integers between 0 and 255, and alpha is a decimal between 0 and 1.
hsl(hue, saturation, lightness)An HSL color value, where hue is an integer between 0 and 359, saturation is a percentage, and lightness is a percentage.
hsla(hue, saturation, lightness, alpha)An HSLA color value, where hue is an integer between 0 and 359, saturation is a percentage, lightness is a percentage, and alpha is a decimal between 0 and 1.
transparentMakes the border transparent.
currentColorUses the color of the element's text.

Best Practices

  • Use descriptive and specific class names for your elements, rather than styling elements directly. This will make your code easier to read and maintain.
  • Use the border-left-color property in combination with the border-left-style and border-left-width properties to control the appearance of the left border of an element.
  • Use the rgba value to specify a color with transparency, rather than using the opacity property. This will allow you to set the transparency of the border independently of the transparency of the element itself.
  • Use the currentColor value to make the border color match the color of the element's text. This can be helpful when you want to create a cohesive design.
  • Avoid using too many different border colors on a single page, as it can make the design look cluttered and confusing. Instead, choose a few consistent border colors and use them throughout your design.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes