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.




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