CSS Property Border

KNOWLEDGE BASE

CSS Property: border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

 

border-width specifies the width of a boxes complete border.
border-top-width specifies the width of a boxes top border.
border-right-width specifies the width of a boxes right border.
border-bottom-width specifies the width of a boxes bottom border.
border-left-width specifies the width of a boxes left border.

Possible Values

 

  • [length]
  • thin
  • medium
  • thick
  • border-width can have:
  • one value, such as 10px, to specify the width of the entire border
  • two values, such as 10px 5px, to specify the width of top/bottom (first value) and right/left (second value) borders
  • three values, such as 10px 5px 2px, to specify the width of top (first value), right/left (second value) and bottom (third value) borders
  • four values, such as 10px 5px 2px 1px, to specify the width of top, right, bottom and left borders respectively

Example

#bender { border-left-width: 2px; }
#fry { border-width: 1px 4px 1px 100px; }

CSS Property: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color

 
border-color specifies the color of a boxes complete border.
border-top-color specifies the color of a boxes top border.
border-right-color specifies the color of a boxes right border.
border-bottom-color specifies the color of a boxes bottom border.
border-left-color specifies the color of a boxes left border.

Possible Values

 

  • [color]
  • transparent
  • border-color can have:
  • one value, such as red, to specify the color of the entire border
  • two values, such as red blue, to specify the color of top/bottom (first value) and right/left (second value) borders
  • three values, such as red blue green, to specify the color of top (first value), right/left (second value) and bottom (third value) borders
  • four values, such as red blue green black, to specify the color of top, right, bottom and left borders respectively

Example

.flamingo { border-right-color: red; }
#peach { border-color: #cc3421; }
#tree { border-color: #fc0 blue #cf0; }