CSS 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.

border-color properties are set by specifying one, two, three, and four color values respectively. Color values are set by using a #ffa500, a 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%);
}

CSS Example: Four differentproperties 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, a RGB Percentage Functional Notation value of, and the keywordsand

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.