Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

Styling Borders

In the past chapters, you've seen me use borders to help you visualize CSS concepts. Here, I'll go into a bit more detail with you.Border Shorthand" section of this chapter 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).

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.