Skip to content
Browse the guide
Craft

Image craft

Outlines, crop, container edges and image identity.

On this page

Bright and dark image content can form uneven apparent edges against a panel. A low-alpha inward outline can quietly finish the perimeter.

.content-image {  outline: 1px solid rgb(0 0 0 / .1);  outline-offset: -1px;}

This is a specimen, not a universal image rule. Test low-alpha neutral white in a dark context. Neutral black/white avoids a palette-tinted fringe; tune strength against real edge content.

Hold the image, crop, radius and dimensions constant in comparisons. The outline overlays inside pixels without changing layout size. Rounded-corner paint reaches farther inward than a one-pixel straight strip; account for that when checking interior preservation.

Separate the image treatment from its external shell. Verify object-fit, clipping and actual image bounds. Transparent logos and irregular artwork often need their own silhouette rather than a rectangular frame; preserve transparency.

#Overlapping avatars

Read Avatar stacking for image inset, an independent surface-colored separation ring, overlap geometry, ordering, counts and participant access.