Web Design: Image Borders

July 21, 2003 - 1:00am ||| 1 Comment | Add new

Beginning/occasional web designers may have noticed that there's no easy way to add a custom-colored border around a .jpeg or .gif in their web page. Yes, you can set a border width attribute in the <img src> tag, for example:
<img src="logo.gif" border="5">
… but the color of the border is the default color of your body text, usually black. If the image is a link, the border changes color to match your link color. [Note: For brevity's sake I'm not including the image's alt, height or width attributes in these code examples, but they should of course be there.]

One trick is to surround a bordered image with <font> tags that change the font color:
<font color="maroon"><img src="logo.gif" border="5"></font>
… which allows the border to be a color other than the default text color, but it doesn't stop the color from changing once you link the image to something.

I hesitate even mentioning that trick, though. Web designers should be avoiding any use of the <font> tag if they want their sites to adhere to current coding standards. Instead, they should be using CSS (Cascading Style Sheets) to set at least text attributes, if not entire layouts.

Can you set image borders with CSS? You betcha:
.myborder { border: solid 5px maroon }

That's a class style called "myborder" that you add or link to your page. (You can call the style anything you want, of course.) Then you apply it to an image in your web page like this:
<img class="myborder" src="logo.gif">

Your web authoring program probably has a way of creating and applying CSS that doesn't involve <heavenforbid> typing in your own code </heavenforbid>, just look for the area in the CSS palette or dialog that deals with "Borders".

What if you prefer to avoid CSS for image borders because you're concerned about cross-platform and cross-browser consistency? A legitimate concern, so here's a solution that uses the down-and-dirty web designer's favorite tool, the paramecium table (one cell, get it … hello? hello? I think they hung up):

1. Put the image in a 1x1 table, table width/height set to Auto, all other table attributes initially set to "0". (You don't want to use the table border attribute at all, since it draws differently on different browsers.)
2. Make sure the image has its own border set to "0".
3. Assign the table a background color that will serve as your border color.
4. Set the Cell Space for the table to the width of your border (e.g., cellspacing="5" for a five-pixel border).

Here's what the code would look like:
<table border="0" cellspacing="5" cellpadding="0" bgcolor="maroon">
<td><img src="logo.gif" border="0"></td>

Et voila… you have a border in the color you want and the size you want. If you resize the image or replace it with another one, the table will automatically resize to kiss fit the border, and the border will always be the size and color you originally assigned. If you link the image, the border still stays the same color, since it belongs to the table, not the image.

Other things you can do with paramecia borders:
— To add an inset from the border, add a Cell Pad attribute to the table (e.g., cellpadding="10" for 10 pixels of margin on all four sides of the image). Then modify the cell attribute (the "<td>" part) by assigning a background color to the cell that's different than the background color of the table. For example, assign a cell color that's the same as the page color so the image appears to float within the border.

— You can add a border around a block of text the same way… put it in a 1x1 table, but instead of an Auto width, set the table to a width equal to the desired width of your text block. The table should have a background color of the border you want, a cellspacing amount equal to the width of the border, and a cellpadding amount equal to the "text inset" you want. The cell itself should be assigned a different background color than the table's as above. You may also need to change the color of the text so it stands out from the cell's background color.

— Experiment: For a textured frame instead of a flat color, try assigning an abstract background image to the table instead of a background color. Or after creating your border, assign a background image to the *cell* with enough cellpadding so it's visible.

Comments (Subscribe to Comments RSS)

1 March 20, 2011 - 10:16pm by Cary Harwin (not verified):

A quick question. We are considering building a new web site that is focused on a service for GEEKS and we’ve been thinking of using a “Pocket Protector” as one of the identifiable images on the site that we are assuming GEEKS would relate to and identify with (albeit our core group here is over 50 and maybe drawing too much on the past), are we out of touch with the current “Geek” fun visual identity or does it still apply.

Appreciate your thoughts.

Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.