Each block-level element, and some in-line elements, are container boxes, with each side having a margin, padding, border-width, border-color, and border-style, all summarised as border.

Some properties are shorthand properties, meaning they allow authors to specify the values of several properties with a single property. An example is the 'font' property described on another page. When values are omitted from a shorthand form, each "missing" property is assigned its initial value, or it's previously used value cascades to this element.
For this reason, no BORDER is visible unless it has 'border-style' set, since the initial value of the border-style is 'none'.

The 'padding' property

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

The surface colour or image of the padding area is specified via the 'background-color' property:

H1 { 
  background-color: green; 
  padding: 1em 3em;
  color: gold;
} 

The 'border' property

The border-width properties are thin, medium or thick and are a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet.

The 'border-color' property sets the colour of the four borders. Values are a colour name, HEX value to stay W3C compliant, or transparent. The 'border-color' property can have from one to four values, and the values are set on the different sides, in clockwise order, as for 'border-width'.

The border-style values are none, hidden, 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', and 'outset', 'solid'.
Remember, the initial value of the border styles is 'none', so no borders will be visible unless the border style is set.

Example:

H1 { border-bottom: thick solid red }

Fancy heading

The above rule set the width, style, and color of the border below the H1 element (and the whole line, as that is how H1 is designed).

Border shorthand properties

The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand '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.