CSS: border-left-color property
This CSS tutorial explains how to use the CSS property called border-left-color with syntax and examples.
Description
The CSS border-left-color property defines the color of the left border of a box.
Syntax
The syntax for the border-left-color CSS property is:
border-left-color: value;
Parameters or Arguments
- value
The color of the left border. It can be one of the following:
Value Description #RRGGBB Hexadecimal representation of the border-left-color
div { border-left-color: #000000; }rgb() RGB representation of the border-left-color
div { border-left-color: rgb(0,0,0); }name Name of the border-left-color (ie: red, blue, black, white)
div { border-left-color: black; }transparent Border is not displayed but still takes up space on the page
div { border-left-color: transparent; }inherit Element will inherit the border-left-color from its parent element
div { border-left-color: inherit; }
Note
- Be sure to set the border-left-style property as well to make sure that your left border appears.
- See also border-left-style, border-left-width, and border-left properties.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS border-left-color property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-left-color property below, exploring examples of how to use this property in CSS.
Using Hexadecimal
Let's look at a CSS border-left-color example where we have provided a hexadecimal value for the border-left-color property.
div { border-left-color: #FF0000; border-left-style: solid; }
In this border-left-color example, we have provided a hexadecimal value of #FF0000 which would display a red left border for the <div> tag. Be sure to apply a border-left-style so that the border appears.
Using RGB
We can also provide the border-left-color value using rgb.
div { border-left-color: rgb(255,0,0); border-left-style: solid; }
In this border-left-color example, rgb(255,0,0) would also display the left border for the <div> tag in red.
Using Color Name
Let's look at a CSS border-left-color example where we have provided the value as a named color.
div { border-left-color: red; border-left-style: solid; }
In this CSS border-left-color example, we have provided the name "red" which would also set the left border to red.
Advertisements