CSS 2.1 Reference: border Property

The border property is used as a shorthand method to specify one or more of the 3 border values (width, style, and color) all in one place. This property applies to all 4 sides.

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

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

  h1 {border: thin solid #ffa500;}

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

  h1 {border: 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 the border width
• none for the border style
• The same as the value of the color property for the border color