HTML, XHTML, & CSS All-in-One For Dummies®, 2nd Edition

Chapter 4. Borders and Backgrounds

In This Chapter

• Creating borders

• Managing border size, style, and color

• Using the border shortcut style

• Understanding the box model

• Setting padding and margin

• Creating background and low-contrast images

• Changing background image settings

• Adding images to list items

CSS offers some great features for making your elements more colorful, including a flexible and powerful system for adding borders to your elements. You can also add background images to all or part of your page. This chapter describes how to use borders and backgrounds for maximum effect.

Joining the Border Patrol

You can use CSS to draw borders around any HTML element. You have some freedom in the border size, style, and color. Here are two ways to define border properties: using individual border attributes, and using a shortcut. Borders don't actually change the layout, but they do add visual separation that can be appealing, especially when your layouts are more complex.

Using the border attributes

Figure 4-1 illustrates a page with a simple border drawn around the heading.

Figure 4.1. This page features a double red border.

Shades of danger

Several border styles rely on shading to produce special effects. Here are a couple things to keep in mind when using these shaded styles:

• You need a wide border. The shading effects are typically difficult to see if the border is very thin.

• Browsers shade differently ...