Borders & Shadows

Borders and shadows are not decorative trim: they shape the perception of depth, separate clickable zones from informational ones, and give each component its identity inside a design system. When a border-radius drops from 12px to 0 across every card on a site, the entire visual identity flips from "modern and warm" to "rigid" without any functional test raising a flag. On business interfaces, a drop shadow removed from a primary action button makes it visually flat and harder to spot, which translates into usage errors. Regressions in this category often come from a CSS reset added to fix one isolated case, a stylesheet cleanup that strips a box-shadow deemed unnecessary, a load-order change between staging and production that alters the cascade, or a border added to a table without managing border-collapse, producing uneven double borders. Outlines and accessibility separators are also affected by global refactors, with direct consequences on focus visibility. Delta-QA handles this category by comparing baseline screenshots against each new build: pixel analysis detects radius changes, the appearance or disappearance of a shadow, stroke width variations, and border color shifts. The visual diff pinpoints every card, every button, and every separator whose look has changed, so you can validate an elevation or radius token refactor without manually comparing components one by one. This makes UI testing on shared components a routine step rather than a sprint-long audit.