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

border color – Interview Questions

Q 1: What is border-color?

Ans: It sets the color of the border.

Q 2: Can different colors be applied to each side?

Ans: Yes.

Q 3: What color formats are supported?

Ans: Name, HEX, RGB, RGBA.

Q 4: Default border color?

Ans: Same as text color.

Q 5: Can border-color be transparent?