Individual Border Color Properties

The border-color property can be set individually using the following properties:

• CSS border-left-color Property: Sets the color of the left border.
• CSS border-top-color Property: Sets the color of the top border.
• CSS border-right-color Property: Sets the color of the right border.
• CSS border-bottom-color Property: Sets the color of the bottom border.
• CSS border-block-color Property: Sets the individual logical block border color values in a single declaration.
• CSS border-inline-color Property: Sets the individual logical inline border color values in a single declaration.

We will understand each property value through the examples.

The border-color property in CSS is used to set the color of an element’s border. It only works when the border-style property is defined, as border-color alone does not render a visible border. The property can accept one to four values, corresponding to the top, right, bottom, and left borders, respectively. If not explicitly set, the border color inherits the element’s color.

Syntax:

border-color: color-value;

Default Value : The current color of the element

Property values: Where color-value can be any of the following:

• name: It specifies a color name, like “blue”.
• Hex: It specifies a hex value, like “#0000ff”.
• RGB: It specifies a RGB value, like “rgb(0, 0, 255)”.
• transparent: It sets the border color of the corresponding element to transparent.