Posts tagged "images"

Getting rid of blue borders around image links

Here’s a really annoying problem that we often hear people asking about: how do I get rid of a blue border that surrounds an image when I make the image a link?

Annoying blue border around a linked image

Annoying blue border around a linked image

Some people will tell you to simply set a zero border in the Dreamweaver Property inspector, but according to David Powers, you should really use CSS instead.

Here’s how to do it:

  1. Create a new CSS rule for linked images, either in the head of the document or in an external style sheet. (We recommend the latter.)
    The new rule looks like this:
    a img { border: none; }
    Note: If you don’t know anything about creating CSS rules, you’ll need to read up on some basic CSS info first.
  2. If you’ve created the rule in a <style> block in the head of your document, you don’t need to do anything else. If you’ve created the rule in an external style sheet, make sure the sheet is linked to the page that’s displaying the annoying border.

Creating a CSS style to remove borders automatically removes the blue border from ALL images that you’ve turned into links. If you use an external style sheet, and link it to all the pages in your site, the same rule affects every image link in your site. This is a much more efficient method of eliminating those pesky borders than adding zero to the border property for every image in your website!

Thanks to David Powers, who originally posted this helpful tip in the Adobe Dreamweaver Forum.