How do I get rid of the blue border around images used as links?

Browsers automatically underline links in blue and put a blue border round images used as links. Older versions of Dreamweaver suppressed the border around images by inserting border="0" in the <img> tag. However, this adds unnecessary markup to the page, so Dreamweaver no longer does it.

All that's needed is a simple CSS style rule. If the rule is created in an external style sheet, it automatically removes the blue border from all image links. The code for the style rule looks like this:

a img {
  border: none;
}

If you're familiar with creating style rules, the quickest way is to type the code directly into your style sheet.

Using the Dreamweaver interface to create the style rule

If you prefer to use the Dreamweaver interface, select CSS Styles > New from the Format menu (use the Text menu in versions prior to Dreamweaver CS4). Alternatively, click the New CSS Rule icon at the bottom right of the CSS Styles panel.

In the New CSS Rule dialog box, select Compound for the Selector Type (use the Advanced radio button prior to CS4), and type a img in the Selector Name field. Then choose whether to create the rule for this document only or in an external style sheet, and click OK to open a new dialog box, where you create the actual style rule.

Select Border from the Category list on the left. Leave all the checkboxes selected, and select none as the value for Top under the Style heading. Click OK.

This creates the following rule:

a img {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}

Although it looks more complicated, this does exactly the same thing.

How it works

This style rule uses what's known as a descendant selector to target all images nested inside links. A descendant selector consists of two or more CSS selectors separated by a space. In this case both selectors use the name of the HTML tag without the surrounding angle brackets. The <a> tag is used for links, and the <img> tag is used for images. For a descendant selector to work, the element represented by the selector on the right must be nested inside an element represented by the selector on the left. Consequently, the rule applies to any <img> tag nested inside an <a> tag.

The code inside the curly braces tells the browser how to style all elements targeted by the rule. So, the first code example sets the border property of images inside links to none. The second example, created by the Dreamweaver interface, sets the style of each border individually, resulting in the same effect.

To learn more about CSS

Visit the Dreamweaver Developer Center for a lot more information on CSS, including hands-on tutorials. There are also instructions on how to use the Dreamweaver Page Properties to create basic styles for a page, and how to attach the same style sheet automatically to each new page in a site in Dreamweaver Community Publishing.