borderColor

Border-color is a CSS property that sets the color of an element's borders. It applies to the borders around the content box and can be specified for all four sides. The property works in conjunction with border-width and border-style to render visible borders. If border-style is none or border-width is 0, the color has no visible effect.

Syntax-wise, border-color can take one to four color values: one value applies to all sides; two values apply to top and bottom and left and right; three values apply to top, left and right, bottom; four values apply to top, right, bottom, left. It also has per-side sub-properties for individual control: border-top-color, border-right-color, border-bottom-color, border-left-color. The color values can be standard CSS color formats such as named colors, hex colors, rgb(), rgba(), hsl(), hsla(), or the keywords currentColor and transparent.

Notes: The color is not inherited by default; using currentColor can tie the border color to the element's text color. In practice, border-color is frequently used in combination with a border shorthand (border: width style color) or with the per-side color properties to achieve precise styling.

Historical context: In older HTML specifications, a presentational attribute called bordercolor existed to set table border colors. This attribute is deprecated in modern HTML in favor of CSS. Contemporary web design uses the CSS border-color property to control border coloration consistently across elements.