CSS Border Color Tutorial[Complete Guide]

The CSS border-color property allows you to specify the color of an element’s border. You can set the color on all four borders of your element together or individually.

Setting Border Color CSS

The syntax for setting the border color in CSS is as follows:

border-color: color;

To set the border color, you simply need to replace “color” with a valid color value. There are several different ways you can specify a color value, including:

• Hexadecimal codes (e.g. #FF0000 for red)
• RGB values (e.g. rgb(255, 0, 0) for red)
• Predefined color names (e.g. red, blue, green)
• HSL Values(e.g. hsl(140, 60%, 50%) for green)
• RGBA values (e.g. rgb(255, 0, 0, 0.5) for red with 50% transparency)

Here are some examples of how to set the border color using different color values:

/* Set the border color to red using a hexadecimal code */
border-color: #FF0000;

/* Set the border color to blue using an RGB value */
border-color: rgb(0, 0, 255);

/* Set the border color to green using a predefined color name */
border-color: green;

/* Set the border color to blue using an RGBA value */
border-color: rgb(0, 0, 255, 0.5);

It is also possible to set the border color to “transparent”, which will make the border invisible. This can be useful for creating the appearance of an element floating on top of the background.

/* Set the border color to transparent */
border-color: transparent;

Keep in mind that you can also set the border color for individual sides of an element using the following properties:

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

This can be useful if you want to have different border colors on different sides of an element.

/* Set the top and bottom borders to red, and the left and right borders to blue */
border-top-color: red;
border-right-color: blue;
border-bottom-color: red;
border-left-color: blue;