How to remove dotted outline and input borders
Most browsers show a dotted line around links (anchor tags), this is an accessibility feature used for people who are not using mouse. When they are switching between links using tab key (or any other keys) on their keyboard, this dotted outline helps them in finding which particular link is currently selected, and then they can press enter to activate the link.
However it do not look good with many designs. So simple solutions is to disable this default outline and use your own styling to show the focus state on links.
How to remove dotted outline? Simply use following CSS:
a:hover, a:active,a:focus {
outline:0;
}Don’t forget to add your own styling for hover, focus, etc. for accessibility.
Similarly you can remove default border displayed around input boxes when user clicks in to type something. Following is the CSS code to remove outline around input:
input:focus {
outline:0;
}You will need to add following meta tag to make this property work in IE 9
<meta http-equiv="X-UA-Compatible" content="IE=9" />
About the author
Alok Jain
As a Frontend Developer and Founder, I blend technical skills with entrepreneurial drive. Skilled in crafting intuitive user interfaces, I bridge design and development for seamless digital experiences. Beyond work, I'm passionate about Philately, sharing my collection, and connecting with fellow enthusiasts in both tech and stamp collecting communities.