CSS border-color Property

CSS border-color property is a shorthand property for setting all the border color properties in one statement.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: See individual properties
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderColor = "#000000"

Syntax

Here is a syntax for the CSS border-color property

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

CSS border-style property may be specified using one, two, three, or four values.

  • If one value is specified, it applies the same color to all four border sides.
  • If two value are specified, the first color applies to the top and bottom and second color applies to the left and right.
  • If three value are specified, the first color applies to the top, second color applies to the left and right, and third color applies to the bottom.
  • If four value are specified, each color applies to the top, right, bottom, left border respectively.

Property Values

The following table describes the values of this property.

Value Description
color Default color black. Specifies the border color
Value Description
color name Name of the border color (eg, red, pink, blue)
#xxxxxx Hexadecimal representation of the border color
rgb(x, x, x) RGB representation of the border color
rgba(x, x, x, x) RGBA representation of the border color
hsl(x, x, x) HSL representation of the border color
hsla(x, x, x, x) HSLA representation of the border color
transparent Specifies the transparent border color
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets border color.

.border-1 {
  border-color: pink;
}
.border-2 {
  border-color: pink red;
}
.border-3 {
  border-color: pink red blue;
}
.border-4 {
  border-color: pink red blue green;
}
.border-5 {
  border-color: #888888;
}
.border-6 {
  border-color: rgb(255, 167, 0, 0.9);
}
.border-7 {
  border-color: hsl(45, 100%, 50%, 0.9);
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.