Borders and Boxes

• the element itself,
• the padding around the element,
• the border around the padding, and
• the margin around the border.

You can control the padding, border, and margin separately.
Margins can be negative, and initially margins are 0.
Padding cannot be negative, and initially padding is 0.

<P style="padding: 10px; background-color:#ffddff;
	  border-color: red gold green blue;
	  border: solid 15px ;
	  margin: 5px;">

This example is placed in a table with coloured background, so the transparent margin is revealed. Transparent padding surrounds the text.

Border Properties

There are properties for all four sides of the element box. And one set each for the three kinds of defining qualities (width, style, color). By mixing and matching the various predefined styles, selecting the right colors and setting various widths a great variety of looks can be achieved.

Border-Width:

   border-top-width: [value]
   border-left-width: [value]
   border-right-width: [value]
   border-bottom-width: [value]

Widths can be specified with 'thin', 'medium', 'thick' or any of the CSS "length" units. The initial value is 'medium' (used if no width is specified).
'border-width' is 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.

Widths set using padding: 10px;
border-top : thin solid tan; border-right : 21px solid tan;
border-bottom : thick solid tan; border-left : 7px solid tan;

Border-Color:

   border-top-color: [value]
   border-left-color: [value]
   border-right-color: [value]
   border-bottom-color: [value]

Colors may be specified with any of the CSS color values, or as 'transparent'.
If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

Example: <P style="color: black; background: white; border: solid;">
In this example, the border will be a solid black line. </P>

In this example, the border will be a solid black line (because color is inherited).

Border-Style:

   border-top-style: [value]
   border-left-style: [value]
   border-right-style: [value]
   border-bottom-style: [value]

The predefined styles that work for IE4 are: none, solid, double, groove, ridge, inset, outset
IE5 adds dashed and dotted.
The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-width' above.

<h2 style="border: solid 15px ;border-color: red gold green blue">City Gallery Books</h2>

BLOCKQUOTE { border:solid;
  border-color: red; padding: 10px; 
  border-left: thick double;
  color: green
}

border:solid; had to be added as first item, to make this example work.
The color of the left border is green, while the other borders are red. This is due to 'border-left' setting the width, style, and color. Since the color value is not given by 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.