title: CSS box-shadow vs outline
body: <p>I have not been able to find a duplicate and you can find a bunch of blog posts which suggest to use <code>box-shadow</code> for element's focus state instead of <code>outline</code> as it is more flexible in terms of styling and it also follows the <code>border-radius</code> of the element you are styling unlike <code>outline</code> which always stays rectangular.</p>
  
  <p>Is it considered a good practice to replace <code>outline</code> with <code>box-shadow</code>? Are there any caveats of doing so?</p>