# CSS: “border-radius”: X is not a “border-radius” value > Canonical HTML version: https://rocketvalidator.com/html-validation/css-border-radius-x-is-not-a-border-radius-value > Attribution: Rocket Validator (https://rocketvalidator.com) > License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) The `border-radius` property accepts one to four values, each of which must be a valid `` or ``. 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: 10` instead of `border-radius: 10px`. CSS requires explicit units for all non-zero length values. - **Invalid keywords**: Using a keyword like `border-radius: large` that isn't part of the CSS specification. - **Negative values**: The `border-radius` property does not accept negative lengths or percentages. - **Unresolvable `var()` references**: The W3C validator performs static analysis and cannot evaluate CSS custom properties. If you use `var(--my-radius)` in an inline `style` attribute, 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 as `border-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 1. **Add units** to any bare numeric values (except `0`, which doesn't need a unit). 2. **Remove negative values** — use `0` as the minimum. 3. **Check shorthand syntax** — you can provide one to four values, optionally followed by `/` and one to four more values for elliptical radii. 4. **Replace unresolvable `var()` references** with static values for validation purposes, or move them into a `
Rounded corners via custom property
``` 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: ```html
``` ### Valid shorthand with elliptical radii The `/` syntax lets you define horizontal and vertical radii separately: ```html
``` 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.