Up until a few years ago, if you hyperlinked an image on a web page, some web browsers would automatically add a blue border around the image. The end-result looked something like this: example of image with a border This practice was a carryover from the use of blue underlining and font color to highlight text links and was the conventional behavior for certain web browsers, most notably Internet Explorer, up until the late 2000s. Removing the automatic blue border could be done in two different ways using CSS: First, the style attribute could be added to the img element and the value border: 0; applied to the image. For example:

<a href="http://example.com" target="_blank">     <img src="../../wp-content/uploads/home168-1.png"          alt="example of image without a border"          style="border: 0;"> </a> 

Here's what the image looks like with the style attribute and border: 0; applied.

example of image without a border

This method was quite common at a time when most web pages were manually coded. Modern websites are typically much larger than they were in the 1990s and early 2000s. As a result, using inline styles is no longer practical and is widely discouraged. Today, it is almost always better to apply styling rules using an external style sheet rather than adding styles directly to an HTML document. To fix the border issue using an external style sheet the following CSS code could be added to an external style sheet.

a img {     border: 0; } 

The external style sheet has to be linked to the HTML document so that the style rules written in the external file are applied to the contents of the HTML document.

Applying Borders to Linked Images

The convention of having borders automatically generated by the browser has gone by the wayside. If you want to add a border around a linked image today you'll have to apply the border manually. There are three different ways you can apply borders to a linked image:

  • Inline styles
  • HTML style tag
  • External CSS style sheet

To understand how each method is used to add a border lets apply the following styles to a linked image:

  • A border that is blue, 2 pixels wide, and dashed rather than solid.
  • Rounded border corners with a 10-pixel radius.
  • 5 pixels of padding between the image and the border.

The end-result we're after is this:

home icon with a blue dashed border linked to example dot com

Inline Styles

The first way to apply these styles to the image is to use the same inline styling method previously used to remove the automatic border. However, in this case, we'll be applying border styling rather than removing it. Here's how we would use inline styles to add the border.

<a href="http://example.com" target="_blank">     <img src="../../wp-content/uploads/home168-1.png"      style="border: 2px blue dashed;         border-radius: 10px;         padding: 5px;"      alt="image description"> </a> 

HTML Style Element

The second way to achieve the same result is to use the HTML style element. This method involves writing CSS styles and placing them in the page head element. The added benefit of this method is that if we have more than one linked image on the page the styles will be applied to all of the linked images automatically. If there were five linked images on the page, they would all get the same treatment even though we only added the code once in the page head. To implement this method of adding a border around a linked image, the following code would be added within the head element.

<style> a img {     border: 2px blue dashed;      border-radius: 10px;     padding: 5px;     } </style> 

External Style Sheet

The third and best way to style a linked image is to use an external style sheet. By adding the styling to an external style sheet, we can apply the styles to an unlimited number of HTML documents automatically styling every linked image on every page with one set of styling rules. The CSS to accomplish this task looks like this.

a img {     border: 2px blue dashed;      border-radius: 10px;     padding: 5px;     } 

That code would be typed into a plain text file, saved with a name like styles.css, and uploaded to the web server. The styles defined in styles.css would imported into the HTML document with a link tag added to the head element of each web page where we wanted the styles applied. The link tag format for loading an external style sheet looks like this.

<link rel="stylesheet" type="text/css" href="styles.css"> 

Wrapping it Up

In the past, some browsers automatically added a border around hyperlinked images. However, that convention has gone by the wayside and all modern browsers have dropped that practice. Today, if you want to add a border around linked images you have to apply border styles manually. In this article, we've covered three methods that can be used to add a border to a linked image. The best way to do this is to use an external style sheet, and if you're serious about writing good code you'll master this method of applying styling to your website.

The icon used in this article was made by Freepik from www.flaticon.com and is licensed by CC BY 3.0