The CSS box model is a collection of CSS properties that apply to all visual HTML elements. As Figure 3.1, “The Box Model” indicates, any HTML element, such as:

<p>The quick brown fox jumped over the lazy dog.</p>

is nested inside three boxes:

Figure 3.1. The Box Model

The Box Model

The margin encloses the border, which encloses the padding, which encloses the content. You can use CSS to style all three of these independently.

The easiest component of the box model to understand is the border, because it can be so visually striking. Most elements do not have borders by default, but they’re easy enough to add with these CSS properties:

  • border-width: A length, such as 3px or 0.2em. Most web designers specify their borders in pixels.

  • border-color: A color, such as green or #ff0000. The default color is usually black.

  • border-style: A keyword that indicates how to draw the border’s lines. The basic style is solid, but there are fancier options available, such as dashed, dotted, double, groove, inset, outset, and ridge. There is also a none option that suppresses borders. If a browsers does not support a particular “fancy” border style, it usually replaces that style with solid.

You can apply borders to any visible element you like: divs, lists, and so on. In the following example, we create generic classes, and apply them to p elements.

Example 3.16. Four Border Examples

<head>
<style>
.thickline {
border-width: 10px;
border-style: solid;
}

.thinblueline {
border-width: 1px;
border-color: #0000ff;
border-style: solid;
}

.greenridge {
border-width: 5px;
border-color: green;
border-style: ridge;
}

.empurpledash {
border-width: 0.5em;
border-color: #800080;
border-style: dashed;
}
</style>
</head>

<body>
<p class="thickline">
"1st, The man-mountain shall not depart from our
dominions, without our license under our great seal.
</p>

<p class="thinblueline">
“2d, He shall not presume to come into our metropolis,
without our express order; at which time, the inhabitants
shall have two hours warning to keep within doors.
</p>

<p class="greenridge">
“3d, The said man-mountain shall confine his walks
to our principal high roads, and not offer to walk, or
lie down, in a meadow or field of corn.
</p>

<p class="empurpledash">
“4th, As he walks the said roads, he shall take the
utmost care not to trample upon the bodies of any
of our loving subjects, their horses, or carriages, nor
take any of our subjects into his hands without their
own consent.
</p>
</body>

The first three borders are specified in pixels. The last is in em, which means that if we change the p’s font size, the border thickness should scale with it.

Four Different Sides

To apply a different border to each side, you must break down border-width, border-color, and border-style into their constituent components:

  • border-width becomes: border-top-width, border-bottom-width, border-right-width, and border-left-width.

  • border-color becomes: border-top-color, border-bottom-color, border-right-color, and border-left-color.

  • border-style becomes: border-top-style, border-bottom-style, border-right-style, and border-left-style.

Here’s an admittedly silly example with four different borders:

Example 3.17. Four Different Sides

<head>
<style>
p.fourborders {
border-top-width: 5px;
border-top-color: #ff0000;
border-top-style: dashed;

border-bottom-width: 10px;
border-bottom-color: #336600;
border-bottom-style: groove;

border-right-width: 20px;
border-right-color: #000080;
border-right-style: solid;

border-left-width: 10px;
border-left-color: #CC9900;
border-left-style: solid;
}
</style>
</head>

<body>
<p class="fourborders">
"But I thought all witches were wicked," said the girl, who
was half frightened at facing a real witch. "Oh, no, that is a
great mistake. There were only four witches in all the Land of
Oz, and two of them, those who live in the North and the South,
are good witches. I know this is true, for I am one of them
myself, and cannot be mistaken. Those who dwelt in the East and
the West were, indeed, wicked witches; but now that you have
killed one of them, there is but one Wicked Witch in all the Land
of Oz--the one who lives in the West."
</p>
</body>

Border Shorthand Notation

As with the font- properties, there is a shorthand notation named border. Unlike font, you may specify the border properties in any order.

Below is a version of Example 3.16, “Four Border Examples”, reformulated to use the shorter notation. The properties appear in essentially random order, but the results are the same as before.

Example 3.18. Four More Border Examples

<head>
<style>
.thickline {
border: 10px solid;
}

.thinblueline {
border: 1px #0000ff solid;
}

.greenridge {
border: ridge 5px green;
}

.empurpledash {
border: #800080 0.5em dashed;
}
</style>
</head>

<body>
<p class="thickline">
"1st, The man-mountain shall not depart from our
dominions, without our license under our great seal.
</p>

<p class="thinblueline">
“2d, He shall not presume to come into our metropolis,
without our express order; at which time, the inhabitants
shall have two hours warning to keep within doors.
</p>

<p class="greenridge">
“3d, The said man-mountain shall confine his walks
to our principal high roads, and not offer to walk, or
lie down, in a meadow or field of corn.
</p>

<p class="empurpledash">
“4th, As he walks the said roads, he shall take the
utmost care not to trample upon the bodies of any
of our loving subjects, their horses, or carriages, nor
take any of our subjects into his hands without their
own consent.
</p>
</body>

This shorthand is convenient, but keep in mind that the border property can only set the same border on all four sides. Fortunately, there are yet four more shorthand properties that apply the border’s width, color, and style to just one side at a time: border-top, border-right, border-bottom, and border-left. For example, if you wanted to apply the green ridge border to just the left side of an element,

.greenridge {
border-left: ridge 5px green;
}

would do the trick.

See Also