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 <img> 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>