Working with Borders

CSS is especially interesting when you realize that you can control element borders quite specifically. This way, you can style a wide range of visual aspects via the element border edge using color, line style, and width. The mere fact that you can style a specific border of a specific element (the left border of one paragraph, the right border of an h2, and so on) means that you can create interesting and appealing visuals by styling portions rather than entire aspects of your element borders.

Borders are a bit complex as a result, and CSS provides several ways to help you manage that complexity:

As with many CSS properties, the border category of properties has a primary shorthand property that allows you to manage style, color, and width of an element's border.
Shorthand properties exist for each of an element's four borders (top, bottom, left, right) so that you can manage the style, color, and width of just that element border.
Complete, individual properties allow you to set specific styles for specific aspects of a border.

So you can get a taste of how all of these properties work, I'll explain each of them. I'm going to go backward from this bulleted list though, starting with the individual styles, then moving on to examples of shorthand properties so you can refine your syntax.

Working with Individual Border Properties

In addition to shorthand border properties, there are 14 individual border properties. In this section, you'll examine each property, its associated values, and some additional properties related to borders that aren't used for width, style, or color.

Border Properties for Border Style

Each individual element has four sides. These are, of course, top, right, bottom, and left. Style in this case is the design style applied to these specific borders.

The individual (nonshorthand) properties specific to border style are as follows:

border-top-style
border-right-style
border-bottom-style
border-left-style

Table 5.4 describes the values related to border styling and their related meaning.

Table 5.4: Border Values and their Meanings
Value	Description
none	No border.
hidden	Like none but refers to border conflict resolution for table elements.
dotted	A series of dots.
dashed	A series of short line segments.
solid	A single line segment.
double	Two solid lines, with the lines plus the space between them equivalent to the defined width.
groove	Appears as a groove carved into the canvas.
ridge	The opposite of groove, appears as a ridge on the canvas.
inset	The border makes the box look as though it were inset into the canvas.
outset	The border makes the box look as though it were coming out of the canvas.

Figure 5.22 shows each of the visible styles (none and hidden are not visible!) applied to all borders within an element.

Figure 5.22: Visible border options

To add style to individual borders, combine the specific border with a suitable value or values into a rule for a selector. The following will create a dotted border to the left of each paragraph:

p  {
     border-left-style: dotted;
}

You can add width and color to these styles, giving you even more design possibilities.

Border Properties Related to Width

Within each individual border properties are width properties related to each of these borders.

The properties specific to border width are as follows:

border-top-width
border-right-width
border-bottom-width
border-left-width

There are four possible values for each of these properties:

The thin value creates a thin border.
The medium value creates a medium border.
The thick value creates a thick border.
You can also define a length value in any available measurement, but not percentages.

Listing 5.7 shows a sample document with a style sheet describing these border properties and values.

Listing 5.7: WWW. Examining Individual Border Properties for Width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Chapter Five</title>
<style type="text/css">
body  {
     font: 24px Verdana, Arial, Helvetica, sans-serif;
     color: black;
     background-color: #FFFFCC;
}
h1  {
     border-style: solid;
     border-top-width: thin;
     border-right-width: medium;
     border-bottom-width: thick;
     border-left-width: 25px;
}
</style>
</head>
<body>
<h1>i've got a stylin' border!<h1>
</body>
</html>

It's important to note that I added the border-style: solid; declaration for the purposes of this example. I needed to provide a style for the entire border before applying widths to demonstrate the concept.

Note

The color here is taken from the element's color value.

The border in Figure 5.23 is comprised of four values. The border to the top is thin (5.23A). The right border is medium (5.23B). The bottom border is thick (5.23C), and the left, chunky border was achieved by using a length value of 25 pixels (5.23D).

Figure 5.23: Creating border styles

Border Properties for Color

The four properties for styling color for specific borders are as follows:

border-top-color
border-right-color
border-bottom-color
border-left-color

There are two available values:

Any CSS2 color value (hex, named color, RGB, percentages)
transparent

To color a specific border within an element, follow these steps:

Add a selector or class and declaration block to your style sheet to which you'd like to add border color:
```
blockquote  {
}
```

Create a border style:

blockquote  {
     border-left-style: dashed;
}

Add a border color:

blockquote  {
     border-left-style: dashed;
     border-left-width: 4px;
     border-left-color: #ffcc00
}

Any instance of a blockquote within a document will now have a 4-pixel dashed yellow border. Listing 5.8 shows a styled document using border color, width, and style.

Listing 5.8: WWW. Individual Border Properties for Style, Width, and Color

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Chapter Five</title>
<style>
body  {
     font: 24px Verdana, Arial, Helvetica, sans-serif;
     color: #ffffff;
     background-color: #ff6633;
}
h1  {
     border-style: solid;
     border-top-width: thin;
     border-right-width: medium;
     border-bottom-width: thick;
     border-left-width: 25px;
     border-right-color: #ffcc33;
     border-top-color: #33ff33;
}
p  {
     font: 20px Verdana, Arial, Helvetica, sans-serif;
     color: black;
}
blockquote  {
     border-left-style: dashed;
     border-left-width: 4px;
     border-left-color: #ffcc00;
     padding: 20px;
}
</style>
</head>
<body>

<h1>i've got a stylin' border!</h1>
<p>Do you now?</p>
<p><blockquote>I've heard it said that a design with a stylin' border can really pep up the way one's web designs look.</blockquote></p>
<p>Did you now?</p>
</body>
</html>

Figure 5.24 shows the results.

Figure 5.24: Adding color, style, and width to borders

Additional Individual Border Properties

There are two additional nonshorthand border properties of which to be aware: border-collapse and border-spacing. Both of these properties manage borders in tables.

There are two layout methods available in CSS2. In the collapsing border method, adjacent cells in a table share the same border; this is the default method used by most browsers. In the separate border method, each cell has its own border-none are shared.

To set the method, you begin with the border-collapse property and either a collapse value:

table  {
     border-collapse: collapse;
}

or a separate value:

table  {
     border-collapse: separate;
}

Now, you can continue styling your tables. Obviously, in the collapse method, adjacent borders will share whichever styles you use for your border width, style, or color based on a hierarchy of rules. With the separate method, every cell has its own border, which can be styled individually.

The border-spacing property comes into play when using the separate method. You can control the space between cells using lengths. If you define one length, it provides the value for both the horizontal and vertical spacing of a table. If you specify two lengths, the first is for horizontal and the second is for vertical:

table  {
     border-collapse: separate;
     border-spacing: 10px 10px;
}

If your table has empty cells, in the separate border model, you can choose to determine whether these cells are displayed are not using the empty-cells property along with a value of show or hide, respectively.

Note

Support for these properties is still more limited than desirable. The border-collapse property is only available in IE for Windows versions 5.5 and 6, along with some buggy implementation in Opera 5. The border-spacing property is available in IE for Windows versions 5.5 and 6, Netscape 6+ for all platforms, and Opera 5 for all platforms. The empty-cells property is only available in Netscape 6+ for all platforms and Opera 5 for all platforms. This limitation makes using these properties unwise for general audiences.

Shorthand Border Properties

You can manage your borders quite effectively using shorthand border properties. I showed you the individual properties first to demonstrate the level of design control you really have over various elements.

The shorthand border properties and their actions are listed in Table 5.5.

Table 5.5: Shorthand Border Properties
Property	Action	Examples
border	Shorthand property to set the same width, color, and style to all four borders of an element.	h2 { border: 2px dotted magenta; }
border-top	Shorthand property to set the same width, color, and style to the top border of an element.	p.note { border-top: 0.25em double black; }
border-right	Shorthand property to set the same width, color, and style to the right border of an element.	.caution { border-right: thick solid red; }
border-bottom	Shorthand property to set the same width, color, and style to the bottom border of an element.	blockquote { border-bottom: thin dashed #3F3; }
border-left	Shorthand property to set the same width, color, ; and style to the left border of an element.	p.block { border-left: medium solid white; }