Styling BordersIn 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. 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 chapter for a more streamlined approach to border properties. Border WidthBorder 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 StyleHere'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 ColorColors 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 stylesbody {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. |