border-color property is a shorthand for setting the color of the four sides of an element’s border —
The value of the
border-color property can be specified using one, two, three, or four different values for each of the border. The direction in which the colors are assigned is top, right, bottom, and left.
The initial value of
border-color property is combination of initial values of the longhand border color properties. You can apply it to all elements. It also applies to
::first-letter. The property is not inheritable but it is animatable as a color.
This is the formal syntax for using
border-color property —
Here are some examples of using this property —
/* border-color: color */ /* the color applies to all sides */ border-color: red; /* border-color: top-bottom right-left */ border-color: red orange; /* border-color: top right-left bottom */ border-color: red yellow green; /* border-color: top right bottom left */ border-color: red yellow green blue;
This value can be used to set the border property to any valid color.
The property works in all major browsers like Chrome, Firefox, Safari, Opera, IE, Edge and on Android and iOS.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.