CSS Border Color

The CSS border-color property is used to set the color of the border of an element. This lets you decide what color the border will be.

You can use named colors (like red, blue), hex codes (#ff0000), RGB/RGBA values (rgb(255,0,0)), or HSL values (hsl(0,100%,50%)).

If you want, you can even assign different colors to different sides (top, right, bottom, left) — without changing the HTML, just using CSS.

border-color

This is a shorthand CSS property that sets the colors of the 4 borders (top, right, bottom, left) of an element.

Default rule:

If you define border with border-style and border-width then border will be visible with color otherwise border will not be visible without border style and width.

By default, border color will be the same as text color means if text color is red then border color also be red. Text color is defined by color property.

If we want to change the border color then border-color property will be used.

Example:

.box {
  width: 500px;
  height: 500px;
  border: 4px solid;
  border-color: red;
}

The same color is used on all sides.

It means:

Top = Red, Right = Red, Bottom = Red, Left = Red

If two values:

.box {
 border: 4px solid;
 border-color: red green;
}

The first value is for top-bottom, the second value is for left-right.

It means:

Top = red, Bottom = red, Right = green, Left = green

If three Value:

.box {
border: 4px solid;
border-color: red green blue;
}

Rule: First top, second right-left, third bottom.

It means:

top = red, right = green, left = green, bottom = blue

If four Value:

.box {
border: 4px solid;
border-color: red green blue orange;
}

Every side of this place has its own color.

It means:

top = red, right = green, bottom = blue, Left = orange

We can also use separate property for each side of border color:

border-top-color

This property sets the color of the top border only.

This is used when you want only the top side border to be in a different color.

The rest of the sides will use their default or specified colors.

This works specifically for the top border only.

.box {
  border: 4px solid;
  border-top-color: red;
}
/* Only top border will be red, others will black*/

border-right-color

This property only sets the color of the right (right-hand side) border.

If you want to give a different color to the right side of the box, then this will be useful.

For the other 3 sides, you will have to use different properties or shorthand.

By default, the color of the border is equal to the text-color of the element.

.box {
  border: 4px solid;
  border-right-color: green;
}
/* Only right border will be green*/

border-bottom-color

This controls the color of the bottom border only.

Useful when you want to highlight the bottom border of table rows, headings or sections.

There will be no effect for the other sides.

With this you can easily create underline-style effects as well.

.box {
  border: 4px solid;
  border-bottom-color: blue;
}
/* Only bottom border will be blue */

border-left-color

This property sets the color of the left border.

You can design a multi-colored border for an element by using different colors.

This is used if you want to highlight the left side.

By default, this is also inherited from text-color unless specified.

.box {
  border: 4px solid;
  border-left-color: orange;
}
/* Only left border will be orange */

Most Important Questions

What happens if you write border-color: red;?

If only one color is provided, that single color applies to all four sides: top, right, bottom, and left. So the entire border will be red.

How are colors applied when using border-color: red green;?

When two values are used, the first one applies to top and bottom, and the second one applies to right and left. So here: top = red, bottom = red, right = green, left = green.

What is the rule when border-color has three values?

With three values:

• The first value applies to the top.
• The second value applies to right and left.
• The third value applies to the bottom.
  So border-color: red green blue; means top = red, right = green, left = green, bottom = blue.

How are values distributed when border-color has four values?

With four values, each side gets its own color, applied in clockwise order: top, right, bottom, left.
For example: border-color: red green blue orange; means top = red, right = green, bottom = blue, left = orange.

If you set border-top-color: red;, what happens to the other sides?

Only the top border changes to red. The remaining sides keep their default border color (usually the text color, or whatever was previously defined).

If you use both border-color: blue; and border-right-color: green;, which color will the right border finally have?

The right border will be green.
Reason: border-right-color has higher specificity for the right side and overrides the shorthand’s value.

What happens if you define border-color: red green; first and then later set border-bottom-color: yellow;?

The bottom border will be yellow, not red. Individual side properties (border-bottom-color) override the shorthand values for that specific side.

If you do not specify border-color at all, what color is used for the borders?

By default, the border color is the current text color of the element, inherited from the color property. For example, if text color is black, border will also appear black.

What is the difference between border-color and border-top-color in terms of usage?

• border-color can define colors for all four sides at once (1 to 4 values).
• border-top-color is specific to only the top border, giving fine control when you want one side to differ.

Why is border-color often used with border-style or border-width?

Because even if you set a border color, the border won’t be visible unless a style (like solid, dashed, dotted) and width are applied. Example:

.box {
  border-style: solid;
  border-width: 3px;
  border-color: red;
}

Without border-style, the border won’t show up at all, no matter the color.