CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

CSS: CSS Borders - Border Styles

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

CSS Borders and Border Styles

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.

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.