(CSS) Examples: Borders.

CIS/SMOG/NIS  jim.cerny@unh.edu  12-JAN-1999

Examples of styled borders.

This is double, darkred, 9 pixels wide. Yadda, yadda, yadda.

This is groove, brown, 1 em wide. Yadda, yadda, yadda.

This is ridge, green, 1.0 cm wide. Yadda, yadda, yadda.

This is outset, yellow, 9 pixels wide. Yadda, yadda, yadda.

This gets more complicated. It shows how individual margins can be controlled and backgrounds set. See the source code for details.

Notes.

WARNING: doesn't work in MSIE 4.01

There are 32 box properties defined in the CSS1 standard. In using these you need to be very careful to check whether a browser (vendor, version, and platform) supports a particular property. These examples are suggestive of what can be done without attempting to illustrate all properties or the complex ways in which they can be combined.

Declared classes are defined within a pair of STYLE tags in the HEAD section of the HTML document. These classes are applied by use of SPAN tags, with a CLASS attribute set to the value of one of the declared classes. View the HTML source or look at the abbreviated example below.

The declared class for the first box is:

.border-1 { border-style: double; border-color: darkred; border-width: 9px; } which is referenced by: <span class="border-1">


Return to CSS seminar home page.