WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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

Topic: HTML / CSSPrev|Next

Answer: Use the CSS outline property

When a hyperlink becomes active or gets focus, a dotted line appears around the link 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.

If you want to remove this outline you can apply these styles to your links:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing Dotted Outlines Using CSS</title>
<style>
    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>

However, it is recommended to apply some alternative style to indicate that the link has focus. It will make your website more accessible and user friendly.


Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties