CSS Function
border-color
The border-color property sets the color of an element's borders. It is a shorthand for setting all four sides or individual sides.
Syntax
border-color: <color>{1,4}Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| 1 value | color | Yes | Applies to all four sides |
| 2 values | color color | No | First for top/bottom, second for left/right |
| 3 values | color color color | No | Top, left/right, bottom |
| 4 values | color color color color | No | Top, right, bottom, left (clockwise) |
Examples
Uniform border
Gray-200 border on all sides.
css
.card {
border: 1px solid;
border-color: #e5e7eb;
}Multi-color borders
Different colors for each side.
css
.fancy {
border-width: 3px;
border-style: solid;
border-color: red blue green orange;
}Tailwind utility
Tailwind provides border-{color} utilities.
html
<div class="border border-gray-200 dark:border-gray-700">Card</div>Browser Support
✓
Chrome
v1++
✓
Firefox
v1++
✓
Safari
v1++
✓
Edge
v12++
✓
Opera
v3.5++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
border-{color}: border-gray-200, border-t-blue-500, border-x-red-300, etc.Frequently Asked Questions
Does border-color inherit?▼
By default, border-color uses the element's currentColor if not explicitly set, so it inherits the text color.
Can I use gradients as border colors?▼
Not directly. Use border-image with a gradient instead: border-image: linear-gradient(to right, red, blue) 1.
Explore CSS Color Tools
Try our free tools to work with border-color and other CSS color functions.
Open Tools