How to Get Rid of the Blue Box Around the Links in Dreamweaver

When you use an image as a link, Dreamweaver automatically encases the image in a blue box. This alerts viewers that the image is clickable, similar to underlining and recoloring text links. However, if you wish to free your image from the constraints of this blue border, you can specify that the link not use a border, which vanquishes the blue box. Depending on your needs, you can remove the borders of a single image or all the images in your document.

Instructions

Single Image

1. Open your HTML page in Dreamweaver.

2. Click the image that's encased in the blue box.

3. Enter "0" in the field labeled "Border" in the bottom "Properties" window and press "Enter." If you can't see the bottom "Properties" window, hold the "Ctrl" key and press "F3."

4. Hold the "Ctrl" key and press "S" to save your changes.

5. Upload your updated page to have the changes become live on your website.

All Images

1. Click the "New CSS Rule" icon on the bottom of the "CSS Styles" window. This icon looks like a page of paper with a "+" in front of it. If you can't see the "CSS Styles" window, hold the "Shift" key and press "F11."

2. Click the drop-down menu under "Selector Type" of the "New CSS Rules" window and click "Compound (based on your selection)."

3. Type "a img" immediately under the "Selector Name" section and click "OK." This creates a rule for the current document. If you wish to use a style sheet for all pages on your website, click the drop-down menu under "Rule Definition" and click "(New Style Sheet File)."

4. Click "Border" in the left page and click "None" in the "Top" drop-down menu under the "Style" column. Click "OK."

5. Hold the "Ctrl" key and press "S" to save your changes. Upload your newly updated page to make it live on your site.

References

• Adobe; How Do I Get Rid of the Blue Border Around Images Used as Links?; David Powers; January 2010
• Adobe; Get Rid of Blue Borders Around Images in Links; David Powers; April 2009