Image border workflow

Add a border when the image edge disappears, not because every image needs a frame.

Border controls are most useful when a screenshot blends into a white page, when a product image needs clearer separation from the layout, or when you want the image to read more like a card. The best border is usually the one people barely notice.

Open the tool Screenshot workflow

The fastest way to choose a border

Think of border styling as a contrast problem. If the image is already clearly visible against its destination background, a border may add noise. If the edge is fading away, the border should restore separation without making the image look boxed in.

Situation What usually works What usually goes wrong
White UI on white page 1px to 2px light-gray border Using pure black or a thick line makes the screenshot feel heavier than the surrounding page.
Product preview card Small radius, light border, optional padding Too much padding can make the actual product look shrunken.
Social graphic Slightly bolder frame or subtle brand color Very saturated borders can hijack attention from the content inside the image.

Three practical border recipes

Documentation frame

Use a small radius, a 1px light-gray border, and no shadow. This keeps screenshots readable inside knowledge-base articles and product docs.

Launch card

Add modest padding, a soft neutral background, and a thin border so the screenshot feels placed rather than pasted into the layout.

Dark-mode contrast fix

When a dark screenshot sits on an even darker page, a mid-tone border can help preserve the silhouette without a heavy glow.

Border width, color, then spacing

Pick the weakest border that still separates the image

If you can solve the problem with a 1px border, that is usually better than reaching for 6px right away.

Choose color based on the destination background

Gray and dark neutrals are easier to reuse across layouts. Strong colors make more sense when the image is part of branded campaign art.

Add padding only if the border still feels too tight

Padding changes the composition more than people expect. It can help a screenshot become a card, but it also shrinks the image itself.

Common overcorrections

Border plus heavy shadow plus thick padding Stacking every available effect often makes a simple screenshot look overproduced.
Using pure white on a white page A white border disappears unless the image sits on a darker or colored background.
Matching the border to a bright accent color too closely That can turn the edge into a visual highlight rather than a framing device.
If you are unsure, use a subtle gray border first. It is the most forgiving starting point across documentation, product pages, and social previews.

Related decisions

PNG vs JPG vs WebP

Choose the right export format once the border and background treatment are settled.