border color

The border-color property in CSS is used to set the color of an element’s border. You can specify the color using various formats, such as color names, hexadecimal values, RGB/RGBA values, or HSL/HSLA values. The border-color property can be applied to all sides of an element’s border simultaneously or to each side individually.

Syntax

element {
    border-color: colorName;  /* you can set any color into border-color property */
}

1. Apply the same color to all four sides

p {
    border-color: green;  /* you can set any color into border-color property */
}

Apply the same color to all four sides

2. Apply different colors to each side

p {
     border-color: red green blue yellow; /* top right bottom left */
}

Apply the same color to all four sides

3. Apply different colors to two sides

p {
     border-color: red green;
}

Apply different colors to two sides

4. Individual sides

p {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

Individual sides

Use border-color property values

Color Name: Use a predefined color name.

element {
    border-color: red;
}

Use a predefined color name

Hexadecimal: Use a hexadecimal value.

element {
    border-color: #ff0000;
}

Use a hexadecimal value

RGB: Use an RGB value.

element {
    border-color: rgb(255, 0, 0);
}

Use an RGB value

RGBA: Use an RGBA value for transparency.

element {
    border-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
}

Use an RGB value

HSL: Use an HSL value.

element {
    border-color: hsl(0, 100%, 50%);
}

Use an HSL value

HSLA: Use an HSLA value for transparency.

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

Use an HSLA value for transparency