HSR Technologies is a Top Rated agency on Upwork.com, Please check our Upwork profile for more details.

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" />