Border Color Property
Last updated: 2026-09-13
border-color Border Color Property
border-color sets the color of an element's border. It accepts every CSS color format, including color names, hex values, rgb(), rgba(), hsl(), and more. Used on its own, it only affects the border color, not the width or style.
| Category | |
|---|---|
| Initial Value | currentcolor |
| Inherited | No |
| Applies To | all |
| Animation Type | color |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
border-color: <color>{1,4};⚙️ Values
| Value | Type | Description |
|---|---|---|
<color> | Type | Border color value |
transparent | Keyword | Transparent border |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： border-color accepts 1 to 4 values so you can give each edge a different color, for example: border-color: red green blue orange.
Tip： Use transparent to create an invisible border, often to reserve space so adding a border on hover does not shift the layout.
❓ FAQ
QWhat is the default value of border-color?
AThe default is currentcolor, which means the border automatically uses the element's current text color (the value of the color property). So if you set only border-width and border-style and no color, the border follows the text color. To keep the border independent of the text, specify a color explicitly, e.g. border-color: #333;.
QHow do I give the four sides different colors?
Aborder-color accepts 1 to 4 values assigned clockwise from the top: one value colors all sides, two values map to top/bottom and left/right, three to top, left/right, and bottom, and four to top, right, bottom, left. For example, border-color: red green blue orange;. Or use per-side properties like border-top-color for precise control.
QWhich color formats does border-color support?
AAll CSS color formats: keywords (red, transparent), hex codes (#9b59b6, #f00), rgb()/rgba(), hsl()/hsla(), and currentcolor. rgba() creates semi-transparent borders, transparent is a common invisible placeholder, and hsla() lets you adjust alpha while keeping the hue.
QHow do I use a transparent border to prevent layout shift on hover?
AFirst reserve the space with border: 2px solid transparent;, then change only the color on hover, e.g. border-color: #3498db;. Because the border always exists, the element size never changes and the layout does not jump. This is the standard anti-shift trick for nav links and buttons.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
