Duplicate CSS Property
When the same property appears twice in a CSS rule, the last declaration wins (CSS cascade). Sometimes this is intentional (providing a fallback for older browsers), but usually it's an accident from copy-paste or merge conflicts.
Why It Matters
Accidental duplicates waste bytes, create confusion during maintenance, and can override intentional values. They often indicate a merge conflict that was resolved poorly.
Code Examples
.button {
background: blue;
padding: 10px 20px;
color: white;
background: red; /* overrides blue above */
padding: 15px 25px; /* overrides 10px 20px */
}.button {
background: red;
padding: 15px 25px;
color: white;
}How to Fix
- 1Search for duplicate properties within the same rule block.
- 2Keep only the value you actually want. Remove the other.
- 3Intentional duplicates for fallbacks should have a comment: /* fallback for older browsers */.
- 4Use stylelint with 'declaration-block-no-duplicate-properties' to catch these automatically.
Check Your CSS Now
Our CSS validator detects this error automatically and shows the exact line number.
Open CSS ValidatorCloudways · Managed Cloud Hosting
Fix this CSS error, then deploy on Cloudways managed cloud (AWS, GCP, DigitalOcean). 20% off 3 months with code VALIDATEHTML.
Related CSS Errors
Unknown CSS Property
How to fix unknown or misspelled CSS property names. Common typos and non-standard properties.
Missing Semicolon in CSS
Why missing semicolons break CSS rules and how to find them. The most common CSS syntax error.
Empty CSS Rule
Why empty CSS rules bloat your stylesheet. How to find and remove unused selectors.