Styling Outlines on :focus and :active


Updated Aug 12th, 2021

Strongly discouraged to remove entirely due to accessibility. But modifying is okay. Right?

It’s all about :focus, and the corresponding outline property. For the :active state as well although you don’t need to set outline: none on this.

Can also leave the outline there just customize it using the shorthand (similar to border) or the individual properties:

outline-width: 3px;
outline-style: solid;
outline-color: teal;


The box-shadow property is powerful. Can control offset, opacity, blur, spread-radius, etc. This comes in handy for the input elements. Try something like this:

box-shadow: 0, 0, 0, rgba(0, 128, 128, .40) // teal