CSS Border Color

The border color is a CSS property that is used to apply color to the border of an HTML element. The color between the padding and the margin of an HTML element is called the border color.

It is important to know that to use the border-color property. You need to define a border-style property first, which means more than the border-color property alone will be needed.

When working with HTML elements, you have the option to set the border values for each side, including the top, bottom, left, and right. You can either apply the same color to all sides or specify a different color for each side.

Syntax of CSS Border Color

Assigning a border color to an HTML element adds style and makes the website look more attractive.

When it comes to styling a border, the first thing that comes to mind is color, which is a crucial element in any designer's toolkit. It has a great impact on users, which makes it essential in border styling. Let us discuss the CSS color formats that we can use to define color.

CSS Color Format

Various color formats are used to define the border color. The formats are as follows:

Standard color names:

The colors that are predefined in CSS are called standard color names, such as "violet," "aqua," "indigo," etc.

Code:

RGB value:

RGB is an acronym for Red, Green, and Blue. The intensity of colors is defined by using integers between 0 and 255 for each color component.

Code:

RGBA (Red, Green, Blue, Alpha) value:

RGBA is an acronym for Red, Green, Blue, and Alpha. RGBA is a color model that is similar to RGB. In RGBA, the intensity of colors is specified by using integers between 0 and 255 for the first three parameters. RGBA also consists of an additional value for opacity called "Alpha", which ranges from 0 to 1. The "Alpha" value is used to define the transparency of the color.

Code:

Hexadecimal (Hex) value:

Hexadecimal colors are represented using six alphanumeric characters (#RRGGBB), which indicate the intensity of red, green, and blue components.

Code:

3-digit Hexadecimal (Hex) value:

It is a shorthand value for some six-digit hexadecimal values.

Code:

HSL value:

HSL is an acronym for Hue, Saturation, and Lightness. The Hue parameter is defined in degrees from 0 to 360, and the Saturation parameter & the Lightness parameter are defined in percentages from 0% to 100%.

HSLA value:

HSLA is an acronym for Hue, Saturation, Lightness, and Alpha. It is similar to HSL, but HSLA includes an additional value for opacity called "Alpha" that ranges from 0 to 1.

Code:

CSS Border Color for Individual Sides

We can set the border values for individual sides of an HTML element using the border-left-color, border-right-color, border-top-color, and border-bottom-color properties. These properties allow you to have different colors for each side of an HTML element's border.

Syntax 1:

It specifies the border color from the top.

Syntax 2:

It specifies the border color from the right.

Syntax 3:

It specifies the border color from the bottom.

Syntax 4:

It specifies the border color from the left.

Example to demonstrate the CSS border color for individual sides:

In this example, we will use standard color name values to specify different sides of an HTML element.

Code:

Output:

CSS Border Color Shorthand Properties

In this example, we will use standard color name value to specify the border color of an HTML element using shorthand properties.

Syntax 1:

The above syntax applies the same color to all sides of an HTML element.

Syntax 2:

The above syntax applies the same top-bottom border color and the same right-left border color to an HTML element.

Syntax 3:

The above syntax applies to an HTML element with a different border color from the top, the same border color from the right-left, and a different border color from the bottom.

Syntax 4:

The above syntax is used to apply different colors to all sides of an HTML element.

Example to demonstrate the CSS border color using shorthand properties:

In this example, we will use standard color name values to specify the border color using CSS shorthand properties of an HTML element.

Code:

Output:

Using RGB (Red, Green, Blue) and RGBA (Red, Green, Blue, Alpha) color values to apply the border color:

We will use RGB (Red, Green, Blue) and RGBA (Red, Green, Blue, Alpha) values to define the border color of an HTML element.

Example to demonstrate the CSS border color using RGB and RGBA color values:

Code:

Output:

Using HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) color values to apply the border color:

We will use HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) values to define the border color of an HTML element.

Example to demonstrate the CSS border color using HSL and HSLA color values:

Code:

Output:

Using Hexadecimal (Hex) and 3-digit Hexadecimal (Hex) color values to apply the border color:

We will use the Hexadecimal (Hex) value and the 3-digit Hexadecimal (Hex) values to define the border color of an HTML element.

Example to demonstrate the CSS border color using the Hexadecimal (Hex) and the 3-digit Hexadecimal (Hex) color values:

Code:

Output:

Conclusion

In this article, you have learned about CSS border color, which is a CSS property used to define the color of the border of an HTML element.

You have learned various color formats that are used to define color in CSS, such as standard color names, RGB color values, RGBA color values, hexadecimal color values, 3-digit hexadecimal color values, HSL color values, and HSLA color values.

You have seen several examples that show how to apply a border color to an HTML element using different color formats.