CSS border-color property
➔ The border-color property specifies the color of the border of an element.
➔ Any color value is fine for the border-color property.
Syntax
border-color: color|transparent|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| color | Specifies the border color. |
| transparent | Specifies that the border color should be transparent. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
.p1 {
border-style: solid;
border-color: red;
}
.p2 {
border-style: solid;
border-color: rgb(255, 0, 0);
}
.p3 {
border-style: solid;
border-color: #ff0000;
}
.p4 {
border-style: solid;
border-color: hsl(0, 100%, 50%);
}Click on the "Try it Now" button to see how it works.
border-color: black red green blue;
Here,top:black.
right:red.
bottom:green.
left:blue.
border-color: black red green;
Here,top:black.
right:red.
bottom:green.
left:red.
border-color: black red;
Here,top:black.
right:red.
bottom:black.
left:red.
border-color: black;
Here,top:black.
right:black.
bottom:black.
left:black.
Example
.p1 {
border-style: solid;
border-color: black red green blue;
}
.p2 {
border-style: solid;
border-color: black red;
}Click on the "Try it Now" button to see how it works.