Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: CSS
cssconsistencydesignvisual
Match border-radius across visually related blocks
Keep corner rounding consistent between elements meant to read as one group (e.g. table heading, body, and pagination), so the composite looks cohesive.
PR: hegnar-bellsheep-web · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codecss
| 1 | .footer { border-radius: 0.5rem; } /* heading uses rounded-2xl */ |
Explanation (EN)
Unrelated corner tokens can make a joined group appear inconsistent.
Objašnjenje (HR)
Good example
New codecss
| 1 | .footer { border-radius: 1rem; } /* matches the heading's rounded-2xl */ |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
Compare the design tokens and the actual outer/inner corners of blocks intended to form one visual group.
Exceptions / Tradeoffs (EN)
Inner joined edges may need zero radius while only outside corners are rounded. Equal values are not always visually correct across inset borders.