border-color CSS (explanation, use cases & examples)

border-color is a CSS property that you can use to set the color of a border. But the border-color is not enough to make the color visible. You need one more property to make it work. It’s border-style.

See the CSS below:

p {
  border-color: red;
  border-style: solid;
}

To avoid confusion, make sure you spelled “color” correctly, and it’s not colour.

There are different types (border-style) of borders you can choose from. Such as solid, dotted, dashed, double, etc.

For border-color, you can choose any HTML color name, hex code, RGB/RGBA.

Color name examples: red, green, blue, etc.

Hex code examples: #FF0000, #008000, #0000FF, etc.

RGB color examples: rgb(255,0,0), rgb(0,128,0), rgb(0, 0, 255), etc.

RGBA color examples: rgba(255,0,0, 0.5), rgba(0,128,0, 0.6), rgba(0, 0, 255, 0.75), etc.

You’ll find all the HTML color names, and their hex, RGB & RGBA codes/values in the link I mentioned above.

Note that, if you do not mention the border-width property, then it will automatically use the default value which is “medium.” But generally, we use pixel values such as 1px, 2px, 3px, etc.

That means, to make a border properly, you need the following three CSS properties together.

• border-width
• border-style
• border-color

See the CSS below:

.element {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

It’s recommended to declare border-style before the border-width. However, if you don’t maintain their ordering (like me), not a big deal. Both work.

The above 3 CSS properties have a shorthand. That means you can write the above 3 lines of CSS in just one single line. It’s border.

.element {
  border: 1px solid green;
}

This one line is the same as the previous 3 lines.

If you want to learn more, see how to use borders in CSS.

In the same vein, you can also add any border colors to an image. To learn more about adding an image border, see this post.

To add borders in HTML tables, see this post.

If you want to learn about gradient borders, see this post.

Frequently asked questions about border-color CSS

You already got a lot of information & examples of border-color. In this section, I will answer some of the common questions about it.

Why is the border color not working

If the border-color is not working, the possible reason could be you have not assigned a border-style. As I mentioned at the very top of this post, border-color alone can’t work. You need to specify at least a border-style to make it work.

So make sure, your CSS has the following properties:

div {
  border-style: solid;
  border-color: blue;
}

Additionally, you can add a border-width such as 1px, 3px, etc.

If you’re using the border shorthand, make sure you have 3 units available as you see below.

selector {
  border: 3px dotted green;
}

The second unit could be solid, double, etc.

Can border-color be a gradient CSS?

Yes, but you have to do it differently. Use the border-image property to implement a gradient border. For more information and examples, see gradient border examples.

How to implement different border colors?

To add different border colors to the top, right, bottom & left sides, you need to specify the colors differently. See my CSS below to better understand the way to do it.

section {
  border-width: 7px; /* default value is medium */
  border-style: solid; /* required property */
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: black;
}

This is the exact CSS that I used to create the above example.

To implement different border colors, you need to specify the following four properties separately:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

How to assign thickness of the border-color

Use the border-width property to assign the thickness of the border. See the example below:

#content {
  border-width: 2px;
}

Note that the thickness is not enough to make the actual border visible. You also need to declare the border-style & border-color.

You can also assign different thicknesses of the border on each side. For example, 2px to the top, 10px to the right, 15px to the bottom & 20px to the left. See the CSS for it below:

p {
  border-width: 2px 10px 15px 20px;
}

This is shorthand for border-top-width, border-right-width, border-bottom-width, and border-left-width accordingly.

Why my button border-color CSS is not working?

Buttons get a default border from the web browsers. To implement your own border-color to the button, you need to specify along with the border-width & border-style. See the example below:

button {
  border-color: blue;
  border-width: 1px;
  border-style: solid;
}
/* OR */
button {
  border: 1px solid blue;
}

For inspiration, see more button styles.

Conclusion

The border-color CSS can’t work alone. It also needs border-style property. If you do not specify the boder-width property, the border will receive a “medium” as the default value.

For the border-width, border-type & border-color, there is a shorthand property called border.

Now you should have a solid grasp on border-color CSS along with other similar properties.