Borders and shadows are big parts of outlining elements, which can give needed contrast or identifying marks. There are some good rules of them to follow when adding them.

  1. Avoid borders/shadows with a similar luminosity to a colored container element. Luminosity is a color's level of lightness. If you convert two colors to grayscale, and they're the same shade of gray, they have the exact same luminosity. Borders/shadows with the same luminosity as a colored container will look too visually strong and unappealing to users.
  2. Related to the above, less luminous container colors still need darker border/shadow colors. So don't give a pale red container a pale gray border/shadow.
  3. Shadows go on more serious elements, borders on less serious ones.
  4. Offset your shadows. Shadows going in one direction look more natural than evenly-spaced blurs around an object.
  5. Don’t rely too much on borders to create contrast or space. They can quickly feel cluttered. To do this, instead rely on box shadows, different background colors, or extra spacing. Accent borders are, however, an easy way to layer on some visual flair.