html tutorial - How to remove dotted line around the links or linked images using CSS - html5 - html code - html form
Answer: Use the CSS property "outline:none;"
- When a hyperlink becomes active , a dotted line seem around the link to distinguish it from alternative links, this can be the default behavior of a hyperlinks.
- it's basically the dotted
outlinethat doesn't have an effect on the surrounding part asborderdoes. If you would like to remove this outline you'll be able to apply these designs to your links:
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>Removing Dotted Line around Links in IE7
IE7 does not support the outlines therefore the higher than style rule does not solve your drawback. to remove the outlines from hyperlinks in IE7 you've got to place some invalid code in your CSS.
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>