border-color

Definition

The border-color property is a CSS property that sets the color of an element's border. It is used to define the color of the border around an element. The border-color property can take a color value as its value. This can be a named color, a hexadecimal color code, a RGB color value, or a HSL color value.

Examples

This will create a border around the element with a color of red:

.element {
  border-color: red;
}

This will create a border around the element with a color of red (hexadecimal color code):

.element {
  border-color: #ff0000;
}

This will create a border around the element with a color of red (RGB color value):

.element {
  border-color: rgb(255, 0, 0);
}

This will create a border around the element with a color of red (HSL color value):

.element {
  border-color: hsl(0, 100%, 50%);
}

This will create a solid, 5 pixel wide, red border around the element:

.element {
  border: 5px solid #ff0000;
}

Values

Best Practices

• Use the border-color property in conjunction with the border-style and border-width properties to fully define the border of an element.
• Choose a color that is appropriate for the design and purpose of the element.
• Use a named color or a hexadecimal color code for simplicity and easy readability.
• Use the transparent value if you want to make the border transparent.
• Use the initial value to set the border-color to its default value.
• Use the inherit value if you want the element to inherit the border-color value from its parent element.
• Use the unset value if you want the element's border-color to be set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Browser Compatibility