1
Border Radius
Detects changes in corner rounding, including individual corner values and percentage-based radii.
25 test cases
Borders & Shadows
Borders and shadows define the visual boundaries of your interface elements. They create depth, separation, and hierarchy. Delta-QA detects every modification to these properties, from subtle radius adjustments to complete shadow overhauls.
What we detect
2
Box Shadow
Catches shadow offset, blur, spread, and color modifications, including multiple shadow layers.
3
Outline
Monitors outline-style, outline-color, outline-width, and outline-offset changes used for focus indicators.
4
Border Style & Width
Detects changes between solid, dashed, dotted, double borders and width variations on each side.
5
Border Color
Identifies color changes on individual border sides, including transparent and inherited values.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The border-radius that makes cards square
A developer adds a CSS reset on a shared component and overwrites the border-radius on every card across the site. Overnight, your rounded-corner cards become square — the site goes from "modern and warm" to "rigid and austere." Nobody has time to check 200 screens on every deploy. Delta-QA compares screenshots and highlights the corners that went from rounded to square on every card — the shape difference stands out clearly in the overlay.
⚠️
The border that shows up twice
A developer adds a border on a table container without handling the border-collapse property. Result: double borders appear in certain spots — lines look thicker in an uneven pattern. The table looks "broken" and unprofessional. It looked fine in staging, but the production stylesheet loads in a different order and the bug surfaces. Delta-QA compares screenshots and highlights the thicker lines — every double border stands out in the diff.
💡
The box-shadow that vanishes
A developer "cleans up" the CSS and removes a box-shadow they consider unnecessary. The main action buttons lose their drop shadow and become flat — they blend into the background. Visually, the buttons are less prominent and your visitors notice them less. The change seemed harmless — removing a shadow — so it was merged without visual review. Delta-QA compares screenshots and detects the shadow's disappearance — the flattened buttons stand out in the visual diff.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.