# Don't Set outline: 0 or outline: none for Focus-Styles

DevFeed: [Don't Set outline: 0 or outline: none for Focus-Styles](<https://devfeed.tech/articles/don-t-set-outline-0-or-outline-none-for-focus-styles-38447.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2022-07-28/dont-set-outline-0-or-outline-none-for-focus/>)

Author: Eevis Panula

Published: 2023-01-03T08:57:40.344000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>)

## AI overview

This tutorial explains why visible focus indicators are important for accessibility and advises against setting the CSS outline property to 0 or none. It also describes the outline shorthand, related properties, browser defaults, and WCAG visibility requirements.

## Source excerpt

"The focus indicator is ugly, and I will remove it. No, this is not up for discussion." These are some lines from a conversation with a designer-developer some years back. The theme of the conversation was a website they were working with. I tried to explain the problem with non-existing focus styles. Still, they insisted their view of beauty was more important than the customer's right to a working website. And this has not been the only conversation I've had around focus styles. Some people want, stubbornly, to remove all focus styles because they (as a mouse user) don't like those focus rings. In this blog post, I'll share why these visible focus styles are so important - and why you should never set outline-property to 0 or none for focus styles. But let's first talk about the property itself. What is outline? outline is a CSS property, or actually, a CSS shorthand property. That means that you can set multiple properties with it. These properties are outline-color, outline-style, and outline-width. You can set one, two, or three attributes simultaneously. Here's an example: .className { outline: 2px solid red; } In this example, the outline is set to be a solid red line, which is 2px wide. In the box model, outline is set outside the box's border edge and does not add to the element's size, meaning it doesn't take any space from the page layout. You can modify the looks of the outline with two more properties: outline-offset, which affects how far from the border of an element the outline is, and border-radius, which modifies the radius of the border. It affects the whole element, not just outline. You can read more about the outline in MDN. outline and Focus The default styles for focus indicators are implemented with the outline-property. Every browser has its own default styles for this focus indicator. These default styles are defined with user agent stylesheets. Jens Oliver Meier has written more about them, if you're interested: "User Agent Style Sheets: