border-color

Sets the color of a border.

Initial value: currentcolor
Inherited: No
Animatable: yes, as a color
Applies to: all elements
JavaScript: element.style.borderColor = "#f59e0b"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.option {
  border: 2px solid transparent;
}

.option:hover {
  border-color: #a78bfa;
}

Preview

Definition and usage

The border-color property sets the color of the border line. It accepts any CSS color format: names, hex notation, rgb(), hsl(), and newer color spaces.

By default the border takes the text color (currentcolor). That means changing an element’s color also changes its border color, unless you’ve set one separately.

You can give one to four values to color the edges differently. The transparent value is handy for reserving space for a border that will appear later.

Syntax

border-color: <color> (1-4 values);

Values

currentcolor
The element’s text color, here a sky blue from the color property.
#f59e0b
<color>
Any color, here amber.
#f43f5e #10b981
two values
The first for top and bottom, the second for the sides.
transparent
A transparent border: it takes up space but stays invisible.

Value	Type	Description
currentcolor		The element’s text color, here a sky blue from the `color` property.
#f59e0b	<color>	Any color, here amber.
#f43f5e #10b981	two values	The first for top and bottom, the second for the sides.
transparent		A transparent border: it takes up space but stays invisible.

Values in practice

currentcolor

The element’s text color, here a sky blue from the color property.

.demo { border-color: currentcolor; }

#f59e0b

Any color, here amber.

.demo { border-color: #f59e0b; }

#f43f5e #10b981

The first for top and bottom, the second for the sides.

.demo { border-color: #f43f5e #10b981; }

transparent

A transparent border: it takes up space but stays invisible.

.demo { border-color: transparent; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Set a transparent border at rest, and only give it a color in :hover. That way the content won’t jump.
For consistency with your color theme, use CSS variables, for example border-color: var(--border).

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course