border (thing)

Property

border

Values

<border-width>, <border-style>, <color>

Initial

not defined for shorthand properties

Inherited

no

The 'border' property is a shorthand property for setting the same width, color and style on all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:

      P { border: solid red }
      P {
      border-top: solid red;
      border-right: solid red;
      border-bottom: solid red;
      border-left: solid red
      }

Unlike the shorthands 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:

      BLOCKQUOTE {
      border-color: red;
      border-left: double
      color: black;
      }

In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.

Note that while the 'border-width' property accepts up to four length values, this property only accepts one.