Skip to main content

HTML Guide

CSS: “border-radius”: X is not a “border-radius” value

The value specified for the border-radius CSS property is not valid.

The border-radius property expects a valid length or percentage value (like 5px, 10%, etc.). Using a CSS variable only works if the variable is properly defined in a CSS rule somewhere in the document, and the HTML is interpreted by a browser that supports CSS custom properties.

For example, if you write:

<div style="border-radius: var(--my-border-radius);"></div>

but never define --my-border-radius, it triggers an error.

Solution:

Define the CSS variable before using it, or use a fixed value instead.

Example 1: Using a fixed value

<div style="border-radius: 8px;"></div>

Example 2: Defining the variable in CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Variable Border Radius Example</title>
    <style>
      :root {
        --my-border-radius: 8px;
      }
      .rounded {
        border-radius: var(--my-border-radius);
      }
    </style>
  </head>
  <body>
    <div class="rounded">Border radius via variable</div>
  </body>
</html>

Using custom properties in inline style attributes is valid in modern browsers if the variable is defined, but some validators may flag it if they can’t resolve the variable. For best validator compatibility, use static, valid CSS values.

Learn more:

Related W3C validator issues