How to add a black border around products and the card below it on Dawn theme

Topic summary

Goal: add a thin black border around both product images and their text cards (and collection cards) in the Shopify Dawn theme.

Early attempts: CSS added to base.css (targeting .card-wrapper, .card__inner, and variants) did not take effect. An alternative CSS suggestion also failed, even after trying different selectors.

Change of approach: After sharing the store URL and password, CSS was injected directly into theme.liquid within a tag. This produced borders around product cards, but initially also drew unwanted borders around the images and misapplied borders on collection tiles.

Adjustments and outcome: Border thickness was reduced, and previous/conflicting CSS was removed from base.css. Selectors were refined so the border surrounds the entire card (image + text) rather than the image alone. The requester confirmed the result matches the desired look.

Notes: Screenshots were used to illustrate the target design and validate fixes. base.css and theme.liquid are Shopify theme files; CSS selectors control which elements receive borders.

Status: Resolved for Dawn. A new participant using the Focal theme reports the codes do not work there; further help is requested and unresolved.

Summarized with AI on January 12. AI used: gpt-5.

Yes please.