About This HTML Issue
The border-radius property accepts one to four values, each of which must be a valid <length> or <percentage>. You can also specify elliptical corners using a / separator with up to four values on each side. Any value that falls outside this syntax — such as a bare number without a unit, a misspelled keyword, a negative value, or a var() reference the validator can’t resolve — will trigger this error.
Here are the most common reasons this error appears:
-
Missing units: Writing
border-radius: 10instead ofborder-radius: 10px. CSS requires explicit units for all non-zero length values. -
Invalid keywords: Using a keyword like
border-radius: largethat isn’t part of the CSS specification. -
Negative values: The
border-radiusproperty does not accept negative lengths or percentages. -
Unresolvable
var()references: The W3C validator performs static analysis and cannot evaluate CSS custom properties. If you usevar(--my-radius)in an inlinestyleattribute, the validator has no way to confirm the variable holds a valid value, so it flags it as an error. -
Malformed shorthand: Incorrect use of the
/separator or too many values, such asborder-radius: 10px 5px / 20px 15px 10px 5px 3px.
This matters for standards compliance and cross-browser consistency. While browsers are generally forgiving and will ignore invalid property values, this means the style silently fails — your element won’t get the rounded corners you intended. Catching these errors during validation helps prevent subtle visual bugs.
How to fix it
-
Add units to any bare numeric values (except
0, which doesn’t need a unit). -
Remove negative values — use
0as the minimum. -
Check shorthand syntax — you can provide one to four values, optionally followed by
/and one to four more values for elliptical radii. -
Replace unresolvable
var()references with static values for validation purposes, or move them into a<style>block where the custom property is defined (though the validator may still flagvar()usage). -
Use valid units such as
px,em,rem,%,vw, etc.
Examples
Invalid: missing unit on a non-zero value
<div style="border-radius: 10;"></div>Fixed: adding the correct unit
<div style="border-radius: 10px;"></div>Invalid: negative value
<div style="border-radius: -5px;"></div>Fixed: using a non-negative value
<div style="border-radius: 5px;"></div>Invalid: unrecognized keyword
<div style="border-radius: round;"></div>Fixed: using a valid percentage for a circular shape
<div style="border-radius: 50%;"></div>
Invalid: var() in inline style that the validator cannot resolve
<div style="border-radius: var(--my-radius);"></div>Fixed: defining the custom property in a stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Radius Example</title>
<style>
:root {
--my-radius: 8px;
}
.rounded {
border-radius: var(--my-radius);
}
</style>
</head>
<body>
<div class="rounded">Rounded corners via custom property</div>
</body>
</html>
Note that even with the custom property properly defined, the W3C CSS validator may still flag var() usage because it performs static analysis without evaluating custom properties. This is a known limitation. If full validator compliance is important, use static values directly:
<div style="border-radius: 8px;"></div>Valid shorthand with elliptical radii
The / syntax lets you define horizontal and vertical radii separately:
<div style="border-radius: 10px 20px / 5px 15px;"></div>
This sets horizontal radii of 10px and 20px (alternating corners) and vertical radii of 5px and 15px, creating elliptical corners. Both sides of the / follow the same one-to-four value pattern.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.