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.