Invalid CSS Property Value
An invalid property value means you've assigned a value that the CSS property doesn't accept. This can be a typo in a color name, a wrong unit, an unsupported keyword, or a malformed function like calc() or rgb(). The browser silently ignores the entire declaration.
Why It Matters
The browser skips the entire rule when a value is invalid. Your styling won't apply, and there's no visible error message. This makes invalid values one of the hardest CSS bugs to track down visually.
Code Examples
body {
color: redd; /* typo in color name */
font-size: 16xp; /* wrong unit */
display: flexbox; /* not a valid value */
margin: 10px 20px 30; /* missing unit */
}body {
color: red;
font-size: 16px;
display: flex;
margin: 10px 20px 30px;
}How to Fix
- 1Check for typos in color names, keywords, and units (px, em, rem, %, vh, vw).
- 2Numbers other than 0 always need a unit: 16px not 16, 1.5rem not 1.5.
- 3Use your browser DevTools: invalid values show a yellow warning triangle.
- 4Common mix-ups: flexbox vs flex, bold vs 700, middle vs center.
Check Your CSS Now
Our CSS validator detects this error automatically and shows the exact line number.
Open CSS ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated CSS on reliable hosting.
Related CSS Errors
Unknown CSS Property
How to fix unknown or misspelled CSS property names. Common typos and non-standard properties.
Missing Unit on CSS Value
Why CSS values need units and when they don't. Fix missing px, rem, em, and other unit errors.
Invalid CSS Color Value
Common CSS color mistakes: wrong hex codes, misspelled names, invalid rgb/hsl values. How to fix them.