Anti-pattern · Depth · Low
Border That Only Adds Depth
A border that only adds depth is a hairline added to a surface that already has a shadow — two mechanisms doing the separating job of one.
The tell
A card or panel with a visible 1px border and a box-shadow at the same time.
Why it happens
Models stack every separating technique they know to guarantee the element "pops". Doubling up is also the fastest way to make a surface look like a 2014 bootstrap card.
The rule
One separating mechanism per surface: a hairline border or a shadow, never both.
- Decide per component family: borders for dense product UI, shadows for layered content.
- If you keep the shadow, drop it to a low-opacity two-layer value, not a large blur.
- On dark surfaces, prefer a subtle light border over a shadow — shadows barely register.
What is a Border That Only Adds Depth?
A card with a 1px border also carrying a drop shadow is redundant: each exists to separate the surface from what is behind it. Worse, the combination muddies the edge — the border reads as a seam rather than an outline. Choose one. Borders suit flat, dense, product UI. Shadows suit layered, content-forward layouts.
Paste this after your existing prompt to strip the pattern from the result.