14th November 2014 in CSS, Snippets

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

Alok design digital experiences to help businesses achieve their goals. He is passionate about designing right User Experience for their customers. For over 15 years, he have worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, Shopify, he follow the best product development practices for design and code, for desktop or mobile.