The border color property in CSS allows you to define the color of an element’s border. It enables you to customize the appearance and style of borders, making them visually distinct and complementing the overall design of your web page.

Let’s explore how to use the border-color property to set border colors.

Syntax

The border-color property is applied to an HTML element and takes a color value as its parameter. Here’s the basic syntax:

selector {
  border-color: color;
}

The selector represents the HTML element(s) you want to target, and color specifies the desired border color. The color value can be specified using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation.

Examples

Using Color Names:

.button {
  border-color: red;
}

.container {
  border-color: blue;
}

Using Hexadecimal Notation:

.box {
  border-color: #336699;
}

.image {
  border-color: #FFA500;
}

Using RGB Notation:

.card {
  border-color: rgb(255, 0, 0);
}

.link {
  border-color: rgb(0, 128, 0);
}

Using RGBA Notation:

.header {
  border-color: rgba(0, 0, 255, 0.5);
}

.footer {
  border-color: rgba(255, 0, 0, 0.8);
}

Using HSL Notation:

.section {
  border-color: hsl(120, 100%, 50%);
}

.sidebar {
  border-color: hsl(240, 100%, 50%);
}

Conclusion

The border-color property in CSS allows you to define the color of an element’s border. By using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation, you can customize the border color and enhance the visual appeal of your web pages. Experiment with different colors to achieve the desired effects and create engaging designs that make your elements stand out.