The border-color property is used to specify the colour of the borders using color names or RGB or HEX values.
When the border-color property is not explicitly set, the border inherits the value of the color property of the element. If the color property is also not specified, the default value for color, and consequently the border color, is black.
While most border styles, such as solid, dashed, or double, inherit the color from the element’s color property, styles like groove, ridge, inset, and outset may behave differently. These styles sometimes use a browser-defined default color (often a grayish tone) instead of the inherited value, depending on the browser implementation.
Border colour can also be set to transparent.
Without the border-style property,border-color does not work. Try removing border-style in the example above.