# Property Description

The border-color shorthand property sets all of the border colors in one declaration. This property can accept from one to four values.

    border-color:
      <top> <right> <bottom> <left>

If all four values are provided, the border colors are as specified.

    border-color:
      <top> <right/left> <bottom>

If three values are provided, right and left border colors are set as middle value.

    border-color:
      <top/bottom> <right/left>

If two values are provided, top and bottom border colors are set as the first value, right and left border colors are set as second value.

    border-color:
      <top/right/bottom/left>

If one value is provided, all four border color values are set the same.

Note: Always declare the border-style property before the border-color property. An element must have borders before the border color can be changed.

# Property Values

Value | Description
--- | ---
color_name | Sets the border color with a color name
hex_number | Sets the border color with a hex code
rgb_number | Specifies the border color with an RGB code
transparent | (default) Specifies that the border color should be transparent
inherit1 | Specifies that the value of the property should be inherited from the parent element

# Examples

This example sets the style and color of all four borders.

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

# Browser Support

Firefox | IE | Chrome | Opera | Safari

1 - 'inherit' not supported by IE

# Miscellaneous Information

Inherited: | No
Defined In: | CSS1