Open In App

How to eliminate blue border around linked Images using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we learn about the elimination of blue borders around linked images using CSS, 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;
}

Example: In this example, we are using the above-explained approach.

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=
        <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; */
}

Example: Here we are using the above method.

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=
        <img src=
             alt="image" />
    </a>
    <h5>Non linked image</h5>
    <img src=
         alt="image" />
</body>
</html>


Output:

default styling removed



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads