Border Color

In CSS you can set the border color of an element by using the ‘border-color’ property
The border-color property allows you to specify the color for one or more sides of an element's border.
First, we should declare a border-style before declaring border-color; otherwise, the border color effect will not be seen.
The border-color property can have up to four values in one statement where we can specify the border color for the top, right, bottom and left borders.

The following values can be passed to border-color

Different ways to set border color

Named Color: You can use one of the named colors, such as "red," "blue," "green," etc., to set the border color.

border-color: red;

Hexadecimal Color Codes: You can use hexadecimal color codes to specify a precise color.

border-color: #FF0000; /* Red */

RGB Color Values: You can also use RGB (Red, Green, Blue) color values to set the border color.

border-color: rgb(255, 0, 0); /* Red */

RGBA Color Values (with Transparency): If you want to specify a transparent colour, you can use the RGBA function.

border-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */

HSL Color Values: HSL (Hue, Saturation, Lightness) color values can also be used to set the border color.

border-color: hsl(0, 100%, 50%); /* Red */

HSLA Color Values (with Transparency): Similar to RGBA, you can use HSLA (Hue, Saturation, Lightness, Alpha) color values to specify a color with transparency.

border-color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */

Example:

<html>

<body>
    <h2>border-color with different values</h2>
    <p style="border-style: double; border-color: red;">Red Color Border.</p>
    <p style="border-style: dashed; border-color: #40a944;">Green Color Border</p>
    <p style="border-style: solid; border-color: rgb(255,200,0);">Yellow Color Border</p>
    <p style="border-style: dotted; border-color: hsl(0, 50%, 50%)">Brown Color Border</p>
    <p style="border-style: solid; border-color: red blue green yellow">Mixed Color Borders</p>
</body>

</html>

Output: