How to eliminate blue borders around linked images using CSS?

CSS Web Development Front End Technology

A website with no visuals is boring, and even if it has a good design, most of us would probably prefer one with many graphics. Why is this the case? Images are a quick and easy way to enhance user experience on your website. 90% of the information we perceive and send to our brains is visual information. You may use images to attract attention and refocus your visitors' attention.

They may be really helpful when it comes to communicating important information. Images are a fantastic emotional trigger that you can use to entice visitors and keep them reading your content.

CSS enables us to style and position those images which creates fantastic visual effects. When we use images as a hyperlink, some old browsers display it with a default blue border. In this article, we will discuss how to change or eliminate the blue borders around the linked images using CSS.

What is a Linked Image?

Linked images are those images added to the web pages which are used as hyperlinks. For creating a hyperlink, we need to add the image within the <a> element. Let’s create a simple hyperlinked image in our HTML page.

Adding linked images using old browsers

If you are adding images as hyperlinks using older versions of browsers like Internet Explorer 6-8, Firefox 7 etc., then it displays a blue border around the images by default. this is similar to the effect which is given to a hyperlinked text. The hyperlinked text is by default underlined with blue color and the font color is highlighted when hovered on.

Example

Let’s add an image as hyperlink using Internet explorer 6.

<!DOCTYPE html>
<html>
<head>
   <title> Linked Images </title>
   <style>
      *{
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      h1{
         color: green;
         text-decoration: underline;
      }
      img{
         max-width: 50%;
         height: 10%;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Linked Images </h2>
   <a href= "https://www.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.com/static/images/logo-color.png" alt= "tutorialspoint"> </a>
</body>
</html>

Note − Run this program in Internet Explorer 6, otherwise if you use any other modern browsers, the default blue border will not be seen.

How to eliminate the default behaviour of hyperlinked images?

This default behaviour can be eliminated using two methods. One of the method is to completely remove the border from the image while the other is to add your own border style to the image. To select all the hyperlinked images, we will make use of CSS selectors.

CSS Selectors

A CSS Selector is a beginning part of a CSS rule. It is a series of elements or other terms which is used to tell the browser about which element has to be selected so that the CSS property values (specified within the rule) can be applied. CSS selectors enables the developers to select (or match) the HTML elements you want to style in your web page.

There are various types of selectors. They are as follows −

Simple selectors – It selects elements using their name, id, class.
Combination selectors – It selects elements using the relationship between them like parent- child.
Pseudo-element selectors – It selects a part of an element like span.
Attribute selectors – It selects elements using their attribute or its attribute value.

Few examples of CSS selectors are CSS element selector, CSS grouping selector, CSS id selector, CSS universal selector etc.,

Universal CSS Selector

CSS asterisk (*) selector, also known as CSS universal selector, is used to select or match all the elements or some part of the element for the entire web page at one go. After selecting, you can use any CSS custom properties to style it accordingly. It matches the HTML elements of any type like <div>, <section>, <nav>, <button> etc., It can also be used to select and style the child elements of a parent.

Syntax

*{
   Css declarations;
}

Using the Parent-child Selector

This selector is used to match all the elements which are descendants of a parent element.

Syntax

parent child{
   css declarations;
}

We can remove the default blue border styling by writing border: none using CSS parentchild selector as shown below –

a img{
   border: none;
}

Example

Let us see an example for this –

<!DOCTYPE html>
<html>
<head>
   <title>No border linked image</title>
   <style>
      *{
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      h1{
         color: green;
         text-decoration: underline;
      }
      a img{
         max-width: 50%;
         height: 10%;
         border: none;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Linked Images </h2>
   <a href= "https://www.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>

Custom Border Style

We can remove the default blue borders of the hyperlinked image by overriding it with your own border style.

<!DOCTYPE html>
<html>
<head>
   <title> No border linked image </title>
   <style>
      *{
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      h1{
         color: green;
         text-decoration: underline;
      }
      a img{
         max-width: 50%;
         height: 10%;
         border: 4px dotted orange;
      }
   </style>
</head>
<body>
   <h1> Tutorialspoint </h1>
   <h2> Linked Images </h2>
   <a href= "https://www.tutorialspoint.com/index.htm/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>

Conclusion

In this article, we have discussed about old browsers which displays blue borders around hyperlinked images and the methods to eliminate the default behavior. However, the modern browsers like Chrome, Edge, Firefox etc., do not display any border around the image by default.