CSS border-color Property

CSS border-color property is used to specify the color of all four sides of border in a single declaration.

The color value can be specified in any valid color format like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.

This paragraph has different color of border each side.

In the example below, the <p> element has a tomato color border on each side. Try it out to see how it works:

Example:

p{
  border-color: tomato;
}

We can also set the border color for each side individually using the following rules:

If the border-color property has four values:

  • border-color: red green blue orange;
    • the top border will be of red color
    • the right border will be of green color
    • the bottom border will be of blue color
    • the left border will be of orange color

If the border-color property has three values:

  • border-color: red green blue;
    • the top border will be of red color
    • left and right borders will be of green color
    • the bottom border will be of blue color

If the border-color property has two values:

  • border-color: red green;
    • top and bottom borders will be of red color
    • left and right borders will be of green color

If the border-color property has only one value:

  • border-color: red;
    • All four sides borders will be of the same red color

Example:

p.four{
  border-color: red green blue orange;
}
p.three{
  border-color: red green blue;
}
p.two{
  border-color: red green;
}
p.one{
  border-color: red;
}

Note: An element must have a border before applying the border-color property to it. Otherwise, the border-color property has no effect on the element.


CSS Syntax

The border-color property has the following syntax:

border-color: color|transparent|initial|inherit;

Property Values

The border-color property accepts the following values:

colorSpecifies the color of the border in a valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. The default value is the current color of the element.
transparentSpecifies a transparent border.
initialSets the border-color property to its default value.
inheritInherits the border-color from the element’s parent.

General Info

Default ValueCurrent color of the element
InheritedNo
JavaScript Usageelement.style.borderColor = “red”

Related Pages

CSS Tutorial: CSS Borders

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment