Here's a mistake I remember having made in the past. I would add some rounded corners on a button and then discover that the focus outline looked a little ugly (it would be rectangular and not follow the border radius). Then I would add outline: none to remove it, thinking I was done. Wrong!
I've now created a problem for keyboard users. If they tab to a button, they can't see that it's in focus because there are no styles to indicate that. In other words, the user interface is not as accessible as it could be.
Here's a better solution (open example page).
button {
border: solid #d3d3d3 1px;
border-radius: 10px;
padding: 10px 20px;
}
button:focus {
box-shadow: 0 0 0 1px #000;
outline: transparent solid 1px;
}
This effectively removes the outline by making it transparent and adds a box shadow to act as the outline instead. The reason for using box-shadow is that it follows the border radius so it's no longer rectangular.
Note that we make the outline transparent instead of just removing it. This is because this way it still works in high contrast mode in Windows.
Also, if you don't like the boring 1 pixel black outline you can go for something like this instead (open example page).
button:focus {
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
}