Borders for image containers

Instead of a normal border on containers which contain images (such as avatars), use an inset box shadow instead. This is nearly invisible for images with a dark background, but shows up nicely for images with a white background that otherwise wouldn't have a border. Note: you can't put an inset box shadow on an tag so you need to put this on a pseudo element of the image's container.

html #ui

<div>
  <!-- <img> goes here -->
</div>

<style>
  div {
    position: relative;
    overflow: clip;

    width: 64px;
    height: 64px;
    border-radius: 9999em;
    background-color: white;
  }

  div:after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0 0 0 / 0.1);
    border-radius: inherit;
  }
</style>