CSS: Working with Borders

Working with Borders

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:

Complete, individual properties allow you to set specific styles for specific aspects of a border.

of shorthand properties so you can refine your syntax.

Working with Individual Border Properties

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

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.

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 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

Shorthand Border Properties

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; }