I have not been able to find a duplicate and you can find a bunch of blog posts which suggest to use box-shadow for element's focus state instead of outline as it is more flexible in terms of styling and it also follows the border-radius of the element you are styling unlike outline which always stays rectangular.
Is it considered a good practice to replace outline with box-shadow? Are there any caveats of doing so?
Is it considered a good practice to replace outline with box-shadow? Are there any caveats of doing so?
The WCAG has a specific failure for that:
Note that users may want to customize their own outline indicator for their own particularity (better contrast, specific color, size, ...). So by removing it and replacing it with box-shadow, you won't let their own settings take precedence over yours, or may interfere with them.
Other styling may make it difficult to see the focus indicator even though it is present, such as outlines that look the same as the focus outline, or thick borders that are the same color as the focus indicator so it cannot be seen against them.