Advertisements
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:
Example
Try this code »<!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:
- How to add border to an element on mouse hover without affecting the layout in CSS
- How to remove white space underneath an image using CSS
- How to place border inside of a DIV element using CSS
Advertisements
