Little Web Hut

CSS 2.1 Reference: border-left Property

CSS border-left Property
Syntax
selector {border-left: width style color;}
  • width is specified by using a length or one of the following keywords: thin, medium, or thick.
  • style is specified by using one of the following keywords: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset.
  • color 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.
  • width, style, and color are all OPTIONAL but at least one of them must occur.
(OR)
selector {border-left: value;}
  • value is specified by using the keyword inherit.
Usage

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

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-left property is set by specifying all 3 values.
  h1 {border-left: thick solid #ffa500;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The border-left property is set by only specifying a style.
  h1 {border-left: dotted;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • 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.
Applies To All elements
Inherited No
Initial Value


border-left Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe border-left property is set by specifying all 3 values.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe border-left property is set by only specifying a style.