Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to eliminate blue border around linked Images using CSS ?

  • Last Updated : 29 Oct, 2021

When you add a hyperlink to an image some old browsers render a hyperlinked image by automatically adding a blue border around the image. This behavior is similar to the use of blue underlining and font color to highlight hyperlinked text. Though most modern browsers like Chrome, Edge, Firefox, etc. do not show any border around the image by default.

For context, this is how internet explorer renders a hyperlinked image:

<a href=”https://www.geeksforgeeks.org/”> <img src=”https://media.geeksforgeeks.org/wp-content/uploads/20210908122634/gfglogo.png”> </a>

Approach: We can remove this default behavior by either defining our own border or by completely removing it using css. We can select specific images using a css class or id, to select all hyperlinked images we will use the parent-child css selector. To know more about css syntax and selectors read this. You can select all hyperlinked images using the selector “a img”, this selects all <img> inside the <a> tag.

Method 1: One way is to define our own border so that we override the default one. We will add the following to the style sheet to change all hyperlinked images.

Syntax:

a img {
    border: 4px dashed darkgreen;
}

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Image Border</title>
    <style>
    a img {
        border: 4px dashed darkgreen;
    }
    </style>
</head>
  
<body>
    <h5>Hyperlinked image</h5>
    <a href="https://www.geeksforgeeks.org/"
    <img src=
             alt="image" /> </a>
    <h5>Non linked image</h5>
    <img src=
             alt="image" />
</body>
  
</html>

Output:

custom border

Method 2: Remove default styling.

We can remove the default browser styling for hyperlinked images using any one of the following CSS styles.

Syntax:

a img {
    border: none;
    /* border-width: 0; */
    /* border-style: none; */
}

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Image Border</title>
    <style>
    a img {
        border: none;
        /* border-width: 0; */
        /* border-style: none; */
    }
    </style>
</head>
  
<body>
    <h5>Hyperlinked image</h5>
    <a href="https://www.geeksforgeeks.org/"
        <img src=
                 alt="image" /> 
    </a>
    <h5>Non linked image</h5
    <img src=
             alt="image" />
</body>
  
</html>

Output:

default styling removed


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!