CSS Borders

A border can be a visual separator between the margin on the outside, and the padding on the inside. You can set the width, color, and style of the entire border, or you can set each of these properties individually for each side.

The border-width property allows you to set all four widths at the same time. The value can be thin, medium, thick, or a numeric value and unit, such as 5px or 0.2em.

If you want to a medium border around every paragraph, you could use:
p { border-width: medium; }
/* This sets all to medium */

p { border-width: medium medium; }
/* This sets top/bottom medium then right/left medium */

p { border-width: medium medium medium medium; }

But guess what? The default border is no border at all, so you'll need to add a second property, border-style, if you want any border to visually appear. The values for border-style are:
none, dotted, dashed, solid, double, groove, ridge, inset, outset.

The first five appear just as they would seem to appear by their description. The last four are special 3D looking borders.

Subscribe now via RSS feed and get all the new tutorials