Borders - HTML Tutorial
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 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 as3pxor0.2em. Most web designers specify their borders in pixels. -
border-color: A color, such asgreenor#ff0000. The default color is usually black. -
border-style: A keyword that indicates how to draw the border’s lines. The basic style issolid, but there are fancier options available, such asdashed,dotted,double,groove,inset,outset, andridge. There is also anoneoption that suppresses borders. If a browsers does not support a particular “fancy” border style, it usually replaces that style withsolid.
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.
<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-widthbecomes:border-top-width,border-bottom-width,border-right-width, andborder-left-width. -
border-colorbecomes:border-top-color,border-bottom-color,border-right-color, andborder-left-color. -
border-stylebecomes:border-top-style,border-bottom-style,border-right-style, andborder-left-style.
Here’s an admittedly silly example with four different borders:
<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.
<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
- Next Page: Margins and Paddings
- Previous Page: Font Control