CSS border-color Property

The border-color property is a shorthand for setting the color of the four sides of an element’s border — border-top-color, border-right-color, border-bottom-color, border-left-color.

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 —

border-color: <color>

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;

Acceptable Values


This value can be used to set the border property to any valid color.

Browser Support

The property works in all major browsers like Chrome, Firefox, Safari, Opera, IE, Edge and on Android and iOS.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

Go To Top