dianping/cat · error · ValidationError

Expected (<'border-radius'>) but found '{}'.

Error message

Expected (<'border-radius'>) but found '{}'.

What it means

The invalid-from-the-start variant from the `border-radius` validator: no valid radius could be matched at all (`valid === false` with tokens remaining), so it throws `ValidationError("Expected (<'border-radius'>) but found '{part}'")`. The first token is not a length, percentage, or `inherit` as the radius grammar requires.

Source

Thrown at cat-home/src/main/webapp/assets/js/editor/worker-css.js:3713

            if (!valid) {

                if (expression.peek() == "/" && count > 0 && !slash) {
                    slash = true;
                    max = count + 5;
                    expression.next();
                } else {
                    break;
                }
            }
            count++;
        }

        if (expression.hasNext()) {
            part = expression.next();
            if (valid) {
                throw new ValidationError("Expected end of value but found '" + part + "'.", part.line, part.col);
            } else {
                throw new ValidationError("Expected (<'border-radius'>) but found '" + part + "'.", part.line, part.col);
            }
        }
    },
    "border-right"                  : "<border-width> || <border-style> || <color>",
    "border-right-color"            : "<color> | inherit",
    "border-right-style"            : "<border-style>",
    "border-right-width"            : "<border-width>",
    "border-spacing"                : { multi: "<length> | inherit", max: 2 },
    "border-style"                  : { multi: "<border-style>", max: 4 },
    "border-top"                    : "<border-width> || <border-style> || <color>",
    "border-top-color"              : "<color> | inherit",
    "border-top-left-radius"        : "<x-one-radius>",
    "border-top-right-radius"       : "<x-one-radius>",
    "border-top-style"              : "<border-style>",
    "border-top-width"              : "<border-width>",
    "border-width"                  : { multi: "<border-width>", max: 4 },
    "bottom"                        : "<margin-width> | inherit",
    "-moz-box-align"                : "start | end | center | baseline | stretch",

View on GitHub (pinned to e815e74d4c)

Solutions

1. Give each radius a unit or a percent: `border-radius: 10px;` / `50%;`.
2. Remove keywords that are not in the grammar; use `border-radius: 0;`... note `0` still needs checking — prefer `0px`/`0%` with this validator.
3. Check templated values (`border-radius: ${r};`) so they never render bare numbers or empty strings.

Example fix

/* before */
.avatar { border-radius: 50; } /* Expected (<'border-radius'>) but found '50' */

/* after */
.avatar { border-radius: 50%; }

function radiusValueStartsValid(v) {
  var first = v.trim().split(/[\s,/]+/)[0];
  return first === 'inherit' || /^-?\d+(\.\d+)?(px|em|rem|%|pt)$/.test(first);
}

try {
  Validation.validate('border-radius', value);
} catch (ex) {
  if (/border-radius/.test(ex.message)) { addLint(ex.line, ex.col, ex.message); return; }
  throw ex;
}

When it happens

Trigger: `border-radius: red`, `border-radius: 10` (unitless number is not allowed for radii), `border-radius: round`, `border-radius: none` (only `border-*-radius` accepts `<length>|<percentage>|inherit`).

Common situations: Unit dropped by a minifier or templating; keyword guesses (`none`, `auto`, `circle`); values copied from `outline-style`-like properties.

Related errors

• Expected end of value but found '{part}'.
• Expected (<'azimuth'>) but found '{}'.
• Expected end of value but found '{}'.
• Expected ([<number> | <percentage>]{1,4} && fill?) but found
• Expected ({}) but found '{}'.

AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/e9c0c7f9cbe08838. Report an issue: GitHub.