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

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS property "outline:none;"

When a hyperlink becomes active or get focus, a dotted line appear 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 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>

Removing Dotted Line around Links in IE7

IE7 doesn't support the outlines so the above style rule doesn't solve your problem. To remove the outlines from hyperlinks in IE7 you have to put some invalid code in your CSS.

  • <!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>
 

Warning:Using the above style rules will create invalid code in your CSS file. If you are very strict about W3C standards you should better not to use it.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.