← Notes

Image outlines

22 September 20261 min readColour · CraftDraft

A screenshot with a white background on a white card has no edge. A border fixes it and makes it look boxed. An inset outline fixes it and stays invisible on any image that does not need it.

The trick is a hairline the colour of the text at very low opacity, drawn inside the image's edge: a box-shadow inset of one pixel, or an outline with a negative offset. On a dark or coloured image it is invisible. On a white image it draws the edge the eye was looking for. Avatars get the same treatment, so a white profile picture on a white row still reads as a circle.

  • Inset hairline at 6–10% of the text colour, not a border
  • Same treatment on avatars, thumbnails and any user-supplied image
  • Never on illustrations you drew yourself; give those their own edge
The whole story / 0 chapters

Image outlines

Choose a chapter. Your reading position stays here until you do.