Little Web Hut

CSS 2.1 Reference: border-color Property

CSS border-color Property
Syntax
selector {border-color: value value value value;}
  • A minimum of 1 and a maximum of 4 values may be specified.
  • value is specified by using a color-value or one of the following keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, or transparent.
(OR)
selector {border-color: value;}
  • value is specified by using the keyword inherit.
Usage

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%);
}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • 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.
Applies To All elements
Inherited No
Initial Value The same as the value of the color property for each of the four individual border sides.


border-color Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleFour different border-color properties are set by specifying one, two, three, and four color values respectively.