Border / Borders -- CSS Guide- Cascading Style Sheets

davesite.com / webstation / css

Cascading Style Sheets: an Interactive Tutorial

Border

advertisement

advertisement
#1 Web Hosting Plan! Free Software & Tools!
1000GB space, 1000GB bandwidth, just $6.95!

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

< Chapter 9 > Ch. 10 part 2

Chapter Selection

Introduction
Basics of CSS
All About Selectors
Background and Color
Fonts and Text
Links
Lists
Margin
Padding
Border
Good CSS Design
Resources

[ jump to top ]

Learn about the #1 Ranked Web Host. 100 GB Space.
Up to 7 Web Sites. Free Domain & Setup. Click Here.