davesite.com / webstation / css

Cascading Style Sheets: An Interactive Tutorial for Beginners

CSS Code Tutorial Chapters:

CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial

[ jump to top ]
Cascading Style Sheets: an Interactive Tutorial

Border

advertisement

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, in format A B C and D as pictured above. 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; }
/* Set each A B C and D */

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.

advertisement

affiliate_link

< Chapter 9 > Ch. 10 part 2

Copyright © 2002 Dave Kristula. All Rights Reserved.