Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Open Borders

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v4 i5
Originally Published: March 6, 2008

Much as I am a political junkie, this is not going to be my take on whether to open or close our borders to our north and south. Borders, as you may know, can also mean other things. In this case I'm referring to lines that are formed around an image that is used as a link.

Take this example: (I know the link doesn't work. This is a demo.)

Browser View

Home

Code View

<a href="#"><img src="images/joygems/home_button.gif" width="99" height="30" alt="Home" /></a>

What's the problem?

Chances are you're seeing a hideous blue border around the image. Most browsers, by default, will put a blue border about 2 pixels wide around an image used as a link. In the earliest days of the web, people did not easily recognize images used as links. Hence, browsers made it easy by automatically rendering a border around a clickable image.

To open those borders - to get rid of them - you need to make sure you set your border like so:

Browser View

Home

Code View

<a href="#"><img src="images/joygems/home_button.gif" width="99" height="30" alt="Home" border="0" /></a>

The CSS Way

Alternatively, instead of removing the unwanted borders with XHTML, the better way would be to use Cascading Style Sheets.

Code View

The CSS would go like this:

img.home
{width:99;
height:30;
border:none; }

The corresponding (X)HTML would look like this:

<a href="#"><img src="images/joygems/home_button.gif" alt="Home" class="home" /></a>

Here I'm "labeling" this image with a class rule I've arbitrarily called "home." This is done to connect the markup with the style rule img.home.

As for the way it will look - it looks just like the image above - the second one, the one without the borders.

With some modern browsers you no longer need to set the border to zero, but since many still do, I suggest you not forget this simple rule.