CSS border-color Property
The border-color property is used to add color to an element's border. The border-color property will only work if the border-style property, which is used to set the borders, is defined first. This property will not function on its own. This can take one to four values for the top, right, bottom, and left borders, respectively. If this property is not set, the element's color is used.
Syntax
Property Values
| Value | Description |
|---|---|
| color | Sets the color of the border. For a complete list of color values, see CSS Color Values. The element's current color is the default color. |
| transparent | The border color should be transparent, as specified. |
| initial | This property is set to its default value. |
| name | It specifies a color name, such as "blue." |
| HEX | It specifies a hex value, such as "#0000ff." |
| RGB | It specifies an RGB value, for example, "rgb(0, 0, 255)." |
| transparent | It makes the corresponding element's border transparent. |
| border-left-color | It is used to change the color of an Element's left border. |
| border-top-color | It may offer the option of filling a different color from the parent border-color to the container's top border. |
| border-right-color | It is used to change the color of an Element's right-border. |
| border-bottom-color | It is used to specify the color of an element's bottom border. |
| border-block-color | It used to set the individual logical block border-color property values in the style sheet in a single location. |
| border-inline-color | It is used in the style sheet to set the individual logical inline border-color property values in a single location. |
| inherit | Inherits this property from its parent element. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| border-color | 1.0 | 1.0 | 1.0 | 4.0 | 3.5 |