CSS Border Colors

CSS Border Colors

Learn how to add colors to HTML element borders using the CSS border-color property and common color formats.

The CSS Border-Color Property

The CSS border-color property sets the color of an element's border. A border style must be specified for the border to be visible.

selector {
  border-style: solid;
  border-color: color;
}

For example:

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

You can also specify the border width:

p {
  border-width: 2px;
  border-style: solid;
  border-color: blue;
}

Border Color Values

Border colors can be specified using the same CSS color formats used for text and background colors, including named colors, HEX, RGB, HSL, and HWB values.

Named Color

border-color: blue;

HEX

border-color: #336699;

RGB

border-color: rgb(51 102 153);

HSL

border-color: hsl(210 50% 40%);

HWB

border-color: hwb(210 20% 40%);

These examples represent approximately the same color using different CSS color formats.

Setting Colors for Individual Border Sides

The border-color property can accept one to four values, allowing you to set different colors for each side of an element. In the HTML Editor example below, you can see how the number of values determines which border sides receive each color.

One Value

border-color: red;

All four borders are red.

Two Values

border-color: red blue;

The top and bottom borders are red, while the right and left borders are blue.

Three Values

border-color: red blue green;

The top border is red, the right and left borders are blue, and the bottom border is green.

Four Values

border-color: red blue green orange;

The values are applied clockwise: top, right, bottom, and left.

Border Color with the Border Shorthand

The CSS border shorthand property can set the border width, style, and color in a single declaration.

.box {
  border: 2px solid #336699;
}

This is equivalent to:

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #336699;
}

The shorthand property is useful when all sides of an element use the same border width, style, and color.

Using currentColor

The currentColor keyword uses the current value of an element's color property. This makes it easy to keep a border color synchronized with the element's text color. In the HTML Editor example below, changing the text color automatically changes the border color.

Transparent Border Colors

Border colors can include an alpha value to make the border partially transparent. The HTML Editor example below uses an RGB color with 50% transparency while the element's text and background remain fully opaque.

Border Colors with CSS Classes

CSS classes make it easy to apply different border colors to selected elements. This is useful for visually distinguishing different types of content while keeping the styles reusable.

.information {
  border: 2px solid #336699;
}
.success {
  border: 2px solid #008000;
}
.warning {
  border: 2px solid #cc6600;
}

Border Color Best Practices

• Always specify a border style when you want the border to be visible.
• Choose border colors that remain visible against the surrounding background.
• Use consistent border colors for elements that serve similar purposes.
• Use currentColor when the border should match the element's text color.
• Avoid relying on border color alone to communicate important information.

Common Border Color Mistakes

Setting a Color Without a Border Style

Setting only border-color may not produce a visible border because the default border style is none.

.box {
  border-color: blue;
}

Specify a border style as well:

.box {
  border-style: solid;
  border-color: blue;
}

Using Low-Contrast Border Colors

A border color that is too similar to the background may be difficult to see. Choose a color that provides enough visual contrast with the surrounding background.

Complete Border Color Example

The HTML Editor example below combines several border-color techniques, including different color formats, individual border colors, and currentColor. Experiment with the values to see how each property changes the borders.

Summary

The CSS border-color property controls the color of an element's border.

Border colors can use named colors, HEX, RGB, HSL, HWB, alpha colors, and other supported CSS color values.

You can apply one color to every side or use multiple values to give individual sides different colors.

Remember that a border style must be specified before the border will be visible.