Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Use the border-radius shorthand instead of per-corner longhand properties
Prefer the single border-radius shorthand over separate per-corner radius declarations when rounding specific edges.
Bad example
| 1 | .card { |
| 2 | border-top-left-radius: 16px; |
| 3 | border-top-right-radius: 16px; |
| 4 | border-bottom-left-radius: 0; |
| 5 | border-bottom-right-radius: 0; |
| 6 | } |
Explanation (EN)
One verified shorthand expresses the complete corner pattern without separate declarations.
Objašnjenje (HR)
Provjereni shorthand opisuje cijeli uzorak kutova bez zasebnih deklaracija.
Good example
| 1 | .card { |
| 2 | border-radius: 16px 16px 0 0; |
| 3 | } |
Explanation (EN)
One shorthand declaration expresses the same thing. The clockwise top-left, top-right, bottom-right, bottom-left order makes the rounded edge obvious at a glance.
Objašnjenje (HR)
Jedna skracena deklaracija izrazava isto. Redoslijed u smjeru kazaljke (gore-lijevo, gore-desno, dolje-desno, dolje-lijevo) odmah jasno pokazuje koji je rub zaobljen.
Notes (EN)
When the same rule declares all intended corner radii, compare all four computed corners and any elliptical radii before replacing longhands with shorthand.
Exceptions / Tradeoffs (EN)
Use longhand only when a single corner is dynamically overridden in isolation (e.g. by a state class) and the shorthand would force you to repeat the other three values. A shorthand resets unspecified corners and can change cascade overrides; keep independent longhands where that reset is unwanted.
Iznimke / Tradeoffi (HR)
Longhand zadrži kada se pojedini kut namjerno mijenja zasebno ili bi shorthand ponavljao ostale vrijednosti. Shorthand resetira nenavedene kutove i može promijeniti kaskadu; ne uvodi takav reset ako nije željen.