Styling Borders

In the past tutorials, you've seen me use borders to help you visualize CSS concepts. Here, I'll go into a bit more detail with you.

You can style borders based on their side, width, style, and color. Each of these uses a different border property: border-width, border-style, and border-color. You place the side of the border in between the two portions of the border property: border-left-color, border-right-style, and border-top-width. See the "Border Shorthand" section of this tutorial for a more streamlined approach to border properties.

Border Width

Border widths can be specified using length values such as pixels or ems or keywords, which include thin, medium, and thick:

border-bottom-width: 2px;
border-left-width: thick;

Border Style

Here's where things get really fun. Currently eight style values will create a unique border, and two additional values are used for the border-style property (see Table 11-1).

Table 11-1. Border styles in CSS




A series of dots


A series of dashes


A solid line


Two solid lines


A groove set into the canvas


A ridge coming out of the canvas


An embedded appearance


A raised appearance


Hidden border, which you can unhide using scripting


No border is ever visible

Here's a look at a border style property and value in action:

border-right-style: dotted

Border Color

Colors can be set using any of the available values: hex, hex shorthand, RGB values, RGB percentages, or supported color names:

border-top-color: #808080;

All Together Now!

Example 11-4 shows you how to use different combinations of border properties.

Example 11-4. Combining border property styles
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
 black; margin-top: 0;}
h1 {font-size: 24px; color: orange; border-left-width: 3px; border-left-color: red;
 border-left-style: dotted; border-bottom-width: thick;  border-bottom-color: lime;
 border-bottom-style: inset;}
h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px; border-bottom
: thin; border-bottom-style: dotted; border-color: fuschia;}
p {border-left-width: medium; border-left-style: solid; border-left-color: blue;}

You can see all the border styles in use in Figure 11-6.

Figure 11-6. Applying borders to specific border sides and applying width, style, and color values.