Adding Borders to Your Photos

When you apply cascading style sheet rules to the <img> tag, you can specify different types of borders to be displayed around your pictures. CSS allows a variety of different border attributes, as we'll discover in the next batch of templates. (You can, of course, add these CSS border attributes to any <img> tag used in any template in this chapter.)

Template 7.5. Picture with Thin Border

The first CSS border attribute we'll apply is that for a thin border, like the one shown in Figure 7.5. In this template, we apply the thin border to a single picture centered at the top of the item listing.

Figure 7.5. A single picture with a thin border.

We actually have to apply two properties to the style attribute in the <img> tag. The first attribute, border-style: solid, specifies a solid border around the picture; the second attribute, border-width: thin, specifies that the solid border is a thin one.

<h1 style="text-align: center">This is the title</h1> <center> <img src="URL" style="border-style: solid; border-width: thin"> </center> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>

Template 7.6. Picture with Thick Colored Border

This next template places a thicker, colored border around the photo, as shown in Figure 7.6.

Figure 7.6. A single photo with a thick border

The code for this template is similar to that of Template 7.5, except the border-width: thin code is replaced with border-width: thick. In addition, we define the color of the border by adding a third property to the style attribute in the <img> tag. This property is border-color, which you can define with any HTML color name or hexadecimal value.

<h1 style="text-align: center">This is the title</h1> <center> <img src="URL" style="border-style: solid; border-width: thick; border-color: red"> </center> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>

Template 7.7. Picture with Ridge Border

Thin and thick aren't the only border styles available. For this template, shown in Figure 7.7, we'll surround the photo with a ridge border, which adds a classy look to your listing.

Figure 7.7. A single photo with a ridge border.

The ridge border effect is accomplished by defining the border-style as ridge and the border-width as thick. You can, of course, make the ridge a different color, by adding the border-color property to the style attribute.

<h1 style="text-align: center">This is the title</h1> <center> <img src="URL" style="border-style: ridge; border-width: thick"> </center> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>