CSS 2.1 Reference: border-bottom Property

The border-bottom property is used as a shorthand method to specify one or more of the following 3 border-bottom properties all in one place.

• border-bottom-width
• border-bottom-style
• border-bottom-color

All 3 of these properties are optional but at least one of them must be specified. Any of these properties that are not specified will automatically be set to their initial value. Since the initial value for the style property is none, the border will not be visible unless style is set to one of the visible styles.

CSS Example: The border-bottom property is set by specifying all 3 values.

  h1 {border-bottom: thin solid #ffa500;}

CSS Example: The border-bottom property is set by only specifying a style.

  h1 {border-bottom: dotted;}

• width keywords:
  • thin
  • medium
  • thick
• style keywords:
  • none - No border.
  • hidden - The same as the keyword none. It is however different for table elements in terms of border conflict resolution.
  • dotted - This is a sample
  • dashed - This is a sample
  • solid - This is a sample
  • double - This is a sample
  • groove - This is a sample
  • ridge - This is a sample
  • inset - This is a sample
  • outset - This is a sample

  Note: The border samples, shown above, may not appear identically in all browsers.

• color 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.

• medium for border-bottom-width
• none for border-bottom-style
• The same as the value of the color property for border-bottom-color