CSS border-color Property

CSS border-color Property

The border-color property in CSS is used to set the color of an element's border. It allows you to define the color for all four borders (top, right, bottom, left) simultaneously, or you can specify different colors for each border.

1. Syntax

selector {
  border-color: color;
}

Multiple Border Colors

You can also set individual border colors for each side of the element:

selector {
  border-color: top-color right-color bottom-color left-color;
}

2. Accepted Values

The value of border-color can be any valid CSS color:

• Named colors (e.g., red, blue)

• Hexadecimal colors (e.g., #ff0000, #00ff00)

• RGB values (e.g., rgb(255, 0, 0))

• RGBA values (e.g., rgba(255, 0, 0, 0.5))

• HSL values (e.g., hsl(0, 100%, 50%))

• HSLA values (e.g., hsla(0, 100%, 50%, 0.5))

3. Example – Setting a Single Border Color

To set the color of the border for all sides:

div {
  border: 5px solid;
  border-color: red;
}

✅ This will set all borders of the div to red.

4. Example – Different Colors for Each Border

You can specify different colors for each side of the border:

div {
  border: 5px solid;
  border-color: red blue green yellow;
}

✅ The div will have:

• Top border → Red

• Right border → Blue

• Bottom border → Green

• Left border → Yellow

5. Example – Using Hexadecimal Color

You can use hexadecimal color codes:

div {
  border: 5px solid;
  border-color: #ff5733;
}

✅ The border will be set to a hex color of #ff5733.

6. Example – Using RGB Color

You can also use rgb or rgba for more precise control, including opacity with rgba:

div {
  border: 5px solid;
  border-color: rgb(255, 99, 71); /* Tomato color */
}

✅ The border will be set to a tomato color using RGB.

7. Example – Using RGBA for Transparency

With rgba, you can specify the opacity (alpha channel):

div {
  border: 5px solid;
  border-color: rgba(255, 99, 71, 0.5); /* Semi-transparent Tomato color */
}

✅ This sets a semi-transparent tomato-colored border.

8. Best Practices

✔ Use border-color in combination with border-style. The border-style must be defined (e.g., solid, dashed, dotted) for the border to be visible.
✔ Use rgba for borders when you need to apply transparency.
✔ Use hexadecimal colors or RGB for better cross-browser compatibility.