How to remove dotted line around the links or linked images using CSS?

How to remove dotted line around the links or linked images using CSS?

Asked on October 30, 2018 in HTML / CSS.
Add Comment


  • 4 Answer(s)

         A dotted line appear around the link when hyperlink becomes active. This is to differentiate it from other links,
        This is the default behavior of a hyperlinks. It is basically the dotted outline that does not affect the surrounding element as border does.

    By applying these styles to your links outline can be removed.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Removing Dotted Outlines Using CSS</title>
    <style type="text/css">
        a, a:active, a:focus{
            outline: none; /* Works in Firefox, Chrome, IE8 and above */
        }
    </style>
    </head>
    <body>
        <div class="menu">
            <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
        </div>
    </body>
    </html>
    

    For removing Dotted Line around Links in IE7

    IE7 doesn’t support the outlines. So for removing the outlines from hyperlinks in IE7 you have to use some invalid code in your CSS.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Removing Dotted Outlines Using CSS</title>
    <style type="text/css">
        a, a:active, a:focus{
            outline: none; /* Works in Firefox, Chrome, IE8 and above */
            _noFocusLine: expression(this.hideFocus=true); /* Fix for IE7 */
        }
    </style>
    </head>
    <body>
        <div class="menu">
            <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
        </div>
    </body>
    </html>
    
    Answered on October 30, 2018.
    Add Comment

    Use outline:none to anchor tag class

    Answered on February 24, 2019.
    Add Comment

    a, a:active, a:focus {
    outline
    : none;
    }

    Answered on February 24, 2019.
    Add Comment

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″>
    <title>Removing Dotted Outlines Using CSS</title>
    <style type=”text/css”>
    a, a:active, a:focus{
    outline: none; /* Works in Firefox, Chrome, IE8 and above */
    _noFocusLine: expression(this.hideFocus=true); /* Fix for IE7 */
    }
    </style>
    </head>
    <body>
    <div class=”menu”>
    <a href=”#”>Home</a> | <a href=”#”>About Us</a> | <a href=”#”>Contact</a>
    </div>
    </body>
    </html>

    Answered on February 24, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.