CSS border-color
The border-color property in CSS sets the color of an element’s border. It allows you to specify one or multiple colors for the borders of an element, including individual settings for the top, right, bottom, and left borders.
Syntax of border-color
</>
Copy
border-color: color | transparent | initial | inherit;Values
| Value | Description |
|---|---|
color | Specifies the color of the border. Accepts any valid CSS color value (e.g., red, #ff0000, rgba(255,0,0,0.5)). |
transparent | Makes the border fully transparent. |
initial | Sets the property to its default value (currentColor, which matches the text color). |
inherit | Inherits the value from the parent element. |
Default Value
currentColor (inherits the current text color)
Examples for border-color
Using the CSS border-color Property
The following examples demonstrate how to use the border-color property to set border colors:
</>
Copy
/* Set a single color for all borders */
.element {
border-color: blue;
}
/* Set different colors for each border */
.element {
border-color: red green blue yellow;
}
/* Set only the top and bottom border colors */
.element {
border-color: red blue;
}
/* Make the border color transparent */
.element {
border-color: transparent;
}
/* Inherit the border color from the parent element */
.element {
border-color: inherit;
}
Example for Colored Borders
Below is an example demonstrating how to apply different colors to each side of the border using border-color: red green blue black:
index.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.highlight {
width: 400px;
padding: 10px;
border-width: 5px;
border-style: solid;
border-color: red green blue black;
}
</style>
</head>
<body>
<h2 class="highlight">Lorem Ipsum</h2>
</body>
</html>
Example with Two Border Colors
border-color: red blue;
Red color will be applied to top and bottom borders. Blue color will be applied to right and left borders.
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.highlight {
width: 400px;
padding: 10px;
border-width: 5px;
border-style: solid;
border-color: red blue;
}
</style>
</head>
<body>
<h2 class="highlight">Lorem Ipsum</h2>
</body>
</html>
Example for Border Color
border-color: red;
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.highlight {
width: 400px;
padding: 10px;
border-width: 5px;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<h2 class="highlight">Lorem Ipsum</h2>
</body>
</html>
Browser Support
The border-color property is supported in modern browsers. Below is a compatibility table:
| Browser | Version |
|---|---|
| Chrome | 1.0 |
| Edge | 4.0 |
| Firefox | 1.0 |
| Safari | 1.0 |
| Opera | 3.5 |