Applying a frame to the document using CSS

With CSS, webmasters can apply a border to a html document,
making the document appear as if it's enclosed in a picture frame. For the
uninitiated, CSS stands for Cascading Style Sheets, and is a powerful tool in
manipulating the look of a document.

In this tutorial, we will see how to utilize CSS to apply a
border to a document.

Applying borders to a document

Adding a border to a document requires that we insert an inline
style inside the body tag. All inline styles follow the below syntax:

style="style attributes"

where "style attributes" represent the kind of styles we want to
add to the <body> tag, such as a big fat border, or a thin and skinny one.
Taking this one step at the time, lets first insert a generic inline style into
the <body>:

<body style="CSS attributes">
"
"
"
</body>

The "style attributes" required to apply a border looks like
this:

border: borderWidth borderStyle borderColor

where border-width is the width of the border,
border-style
is the type of border, and border-color is the color of the
border. Before even attempting to go any further, the below gives a document a
solid border of width 20px and color green:

<body style="border: 20px solid green">
"
"
"
</body>

We can manipulate this border in countless ways, by changing the values
associated with the border-width, border-style,
and border-color
attributes. Here are the available values:

Lets play around a little with these values, and see what happens.

<body style="border:5px ridge green">

Document

<body style="border:10pt double blue">

Document

<body style="border:10pt groove red">

Document

<body style="border:10pt outset red">

Document

As you can see, things can get quite interesting. Below is a live border
tester which you can use to see the effect different border settings have on the
document:

Border width::

Style:

Color:

Finally, the border attribute we've just learned can in fact be applied to
elements other than the body, for example: