CSS border-color attribute

Definition and Usage

The border-color property sets the color of four borders. This property can set 1 to 4 colors.

The border-color property is a shorthand property that can set the color of all visible border parts of an element, or set different colors for each of the 4 borders. Please see the following examples:

Example 1

border-color:red green blue pink;
  • The top border is red
  • The right border is green
  • The bottom border is blue
  • The left border is pink

Example 2

border-color:red green blue;
  • The top border is red
  • The right and left borders are green
  • The bottom border is blue

Example 3

border-color:dotted red green;
  • The top and bottom borders are red
  • The right and left borders are green

Example 4

border-color:red;
  • All 4 borders are red

Remember that the border style cannot be none or hidden, otherwise the border will not appear.

Note:Always declare the border-style attribute before the border-color attribute. The element must have a border before you change its color.

See Also:

CSS Tutorial:CSS Borders

HTML DOM Reference Manual:borderColor Property

Example

Set the color of 4 borders:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
color_name Specifies the border color with the color name (e.g., red).
hex_number Specifies the border color with the hexadecimal value (e.g., #ff0000).
rgb_number Specifies the border color with the rgb code (e.g., rgb(255,0,0)).
transparent Default Value. The border color is transparent.
inherit Specifies that the border color should be inherited from the parent element.

Technical Details

Default Value: not specified
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.borderColor="#FF0000 blue"

More Examples

Set the color of four borders
This example demonstrates how to set the color of four borders. You can set one to four colors.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Note:Internet Explorer 6 (and earlier versions) does not support the attribute value "transparent".

Note:Internet Explorer 7 and earlier versions of browsers do not support the value "inherit". IE8 requires !DOCTYPE. IE9 supports "inherit".