borders

You can use the shortcut border property to set the width, style or colour for all the borders. The following example sets a solid red border that is 10 pixels wide:

 p {border: 10px solid red;}

The width, style or colour applies to the borders in the following order: top, right, bottom and left. If you give a single value, the browser applies it to all four borders. If you enter two values, the first value applies to the top and bottom borders and the second to the left and right borders. If you enter three values, the first value applies to the top border, the second to the left and right borders and the third to the bottom border.

Alternatively, you can set the width, style and colour separately:

body {border-width: 10pt;
      border-style: solid;
      border-color: blue;}

Here’s a list of the options you have:

• The width can be thin, medium, thick or a value in points, pixels, inches and so on. If you use thin, medium or thick, the width depends on what the browser chooses to display. Some borders, especially the 3-D ones need to be at least three or four pixels or they don't display properly
• The style can be none, dotted, dashed, solid, double, groove, ridge, inset, outset. Dotted and dashed only work in Internet Explorer 5.5 not in earlier versions
• The colour can be one of the 16 named colours, a hexadecimal value or an rgb value. See color for more details

Here are some examples of borders:

Instead of setting the border properties together, you can use the border-left, border-right, border-bottom and border-top properties set the width, style and colour of the left, right, bottom and top borders respectively. For example:

body {border-left: 10px solid black;
      border-right: 10px double blue;
      border-bottom: 20px groove red;
      border-top: 20px ridge green;}

So, you can have different widths, styles and colours for each of the borders if you want to. A bit over the top maybe.

If you like typing, you can even specify the width, colour and style separately for each border. For example:

body {border-left-style: solid;
      border-left-width: 10pt;
      border-left-color: black;
      border-right-style: dotted;
      .
      .
      border-top-color:red;}