Tips for Creating Beautiful Image Borders

The common way: Solid color border

The most basic method is to add a solid border with a fixed color, like a soft black or white:

<img
  src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d"
  className="rounded-xl border border-black/10 dark:border-white/10"
/>

This works fine, but if the image has many colors, the fixed border may not blend well and can look distracting.

A better way: Border that adapts to the image

Instead of setting the border color directly, you can use a wrapper with a subtle ring. This way, the border adapts better to the image content, creating a softer, more natural look:

<div className="relative">
  <img
    src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d"
    className="rounded-xl"
  />
  <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-black/10 ring-inset dark:ring-white/10" />
</div>

With this technique, the border is visible enough to separate the image from the background, but it won't steal focus from the image itself.

Real-world Example

This technique is already used in real products. For example, here's a screenshot from the App Store, where images have subtle adaptive borders. The borders are soft enough to separate the image from the background, while still keeping the focus on the content inside.

Conclusion

If you want your images to look cleaner and more polished, try switching from a fixed border-color to a ring that adapts to the image. It's a small change, but it makes the design feel much more modern and balanced.