CSS 2.1 Reference: border-color Property

The border-color property is used as a shorthand method to specify all 4 border colors in one place. See the Box Model for a description of the boxes that are generated for elements and the relative position of the borders.

• The Individual border sides are specified as follows:
  • If 1 color is specified - All 4 borders are set to this color.
  • If 2 colors are specified - 1st color = top and bottom borders, 2nd color = left and right borders.
  • If 3 colors are specified - 1st color = top border, 2nd color = left and right borders, 3rd color = bottom border.
  • If 4 colors are specified - 1st color = top border, 2nd color = right border, 3rd color = bottom border, and 4th color = left border.

CSS Example: Four different border-color properties are set by specifying one, two, three, and four color values respectively. Color values are set by using a RGB 6-Digit Hexadecimal value of #ffa500, a RGB Percentage Functional Notation value of rgb(30%,50%,70%), and the keywords red and lime.

#sample1 {border: medium solid black;
          border-color: red;
}
#sample2 {border: medium solid black;
          border-color: lime #ffa500;
}
#sample3 {border: medium solid black;
          border-color: lime #ffa500 rgb(30%,50%,70%);
}
#sample4 {border: medium solid black;
          border-color: red lime #ffa500 rgb(30%,50%,70%);
}

• aqua - aqua = #00ffff = rgb(0,255,255)
• black - black = #000000 = rgb(0,0,0)
• blue - blue = #0000ff = rgb(0,0,255)
• fuchsia - fuchsia = #ff00ff = rgb(255,0,255)
• gray - gray = #808080 = rgb(128,128,128)
• green - green = #008000 = rgb(0,128,0)
• lime - lime = #00ff00 = rgb(0,255,0)
• maroon - maroon = #800000 = rgb(128,0,0)
• navy - navy = #000080 = rgb(0,0,128)
• olive - olive = #808000 = rgb(128,128,0)
• orange - orange = #ffa500 = rgb(255,165,0)
• purple - purple = #800080 = rgb(128,0,128)
• red - red = #ff0000 = rgb(255,0,0)
• silver - silver = #c0c0c0 = rgb(192,192,192)
• teal - teal = #008080 = rgb(0,128,128)
• white - white = #ffffff = rgb(255,255,255)
• yellow - yellow = #ffff00 = rgb(255,255,0)
• transparent - The background color under the border is visible.
• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.