Managing Borders .......................................................................................
If you choose to surround elements of a Web page with borders, you’re in
luck: CSS offers quite a variety of ways to employ borders, and it allows you
to add borders to any element you want to.
A borderis a frame, just a line usually, that surrounds an element. However,
you can selectively leave out any of the four lines of a border or define them
each differently using the border-top, border-right, border-bottom, and
border-leftproperties individually.
A border surrounds the content, and, optionally, any padding that you’ve
specified for an element. Any optional margin specified is not surrounded by
the border, but instead separates this element from surrounding elements.
Borders can be given values indicating how you want them to look: color,
thickness, and style (dotted, inset and so on). The thickness or width of the
border can be specified in the usual CSS variety of ways (using the units of
measurement described in detail in Chapter 6, such as px, in, or em), includ-
ing the default medium, which is two or three pixels wide. The default color
of a border is the text color of the element, or if an element has no text (an
image, for example), the text color of the element’s parent is inherited.
If people want to know why you use CSS, you can tell them that one of many
reasons is the borderproperty. It can be applied to any element, and, like
many CSS features, the borderproperty is flexible, attractive, sensible, effi-
cient, and useful. Without CSS, you’d have to resort to really nasty solutions
like torturing the tableelement into serving as a frame.
Specifying a simple border ...............................................................
You’ll find all kinds of borders at your disposal when using CSS. The simplest
border specification just uses the borderproperty followed by a series of
three values (width, style, and color) separated by spaces, like these:
<html>
<head>
<style>
body {font-size:24px;}
p {border: thick solid green;}
</style>
</head>
<body>
184 Part III: Adding Artistry: Design and Composition with CSS
