1. css
  2. /properties
  3. /border-color

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

ValueDescription
<color>Specifies the color of the border. Can be a named color, a hexadecimal color code, a RGB color value, or an HSL color value.
transparentMakes the border transparent.
initialSets the border-color to its default value.
inheritThe element inherits the border-color value from its parent element.
unsetThe element's border-color is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes