CSS Border Color

In CSS (Cascading Style Sheets), you can set the border color of an element using the border-color property.

There are several methods to specify the border color:

Keyword Values:

CSS provides some predefined color names that you can use as border colors.

Try yourself 
        
            div {
   border-color: red;
   border-style: solid;
   width: 200px;
   height: 100px;
}

Common color keywords include red, blue, green, black, white, yellow, purple, orange, and many others.

Hexadecimal Values:

Hexadecimal color values allow you to define custom colors using a combination of red, green, and blue (RGB) values represented as six-digit codes.

Try yourself 
        
            div {
   border-color: #FF0000; /* Red */
   border-style: solid;
   width: 200px;
   height: 100px;
}
RGB Values:

RGB color values represent the intensity of red, green, and blue as integers in the range 0-255.

Try yourself 
        
            div {
   border-color: rgb(255, 0, 0); /* Red */
   border-style: solid;
   width: 200px;
   height: 100px;
}
RGBA Values:

RGBA color values are similar to RGB values but include an additional alpha channel to specify opacity (0 = transparent, 1 = fully opaque)

Try yourself 
        
            div {
   border-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
   border-style: solid;
   width: 200px;
   height: 100px;
}
HSL and HSLA Values:

HSL stands for Hue, Saturation, and Lightness. It provides an alternative way to define colors. HSLA is similar to HSL but includes an alpha channel for opacity.

Try yourself 
        
            div {
   border-color: hsl(0, 100%, 50%); /* Pure red */
   border-color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */
   border-style: solid;
   width: 200px;
   height: 100px;
}
Using Multiple Values:

You can also define individual colors for each side of the border in the following order: top, right, bottom, and left.

Try yourself 
        
            div {
   border-color: red green blue yellow; /* Top, Right, Bottom, Left */
   border-style: solid;
   width: 200px;
   height: 100px;
}
Inheriting Border Color:

If you want an element to inherit the border color you can use the inherit keyword:

Try yourself 
        
            div {
   border-color: inherit; /* Will have the same border color as the parent */
   border-style: solid;
   width: 200px;
   height: 100px;
}
Transparent Border:

To make a border transparent, you can use the transparent keyword or rgba() with an alpha value of 0:

Try yourself 
        
            div {
   border-color: transparent; /* Transparent border */
   border-style: solid;
   width: 200px;
   height: 100px;
}
Applying different colors to each side:

You can set different border colors for each side of an element using the following individual properties:

Example
Try yourself 
        
            div {
   /* Applying different border colors to each side */
   border-top-color: red;       /* Top border is red */
   border-right-color: green;   /* Right border is green */
   border-bottom-color: blue;   /* Bottom border is blue */
   border-left-color: #FFA500;  /* Left border is orange */
   border-style: solid;
   width: 200px;
   height: 100px;
}