HTML Guide for border-radius

CSS: “border-radius”: “none” is not a “border-radius” value.

The error you encountered indicates that the value none is not a valid value for the border-radius CSS property. The border-radius property expects a length value (like px, em, etc.), or keywords that define its radius, such as 0 or inherit.

How to Fix It

Use a Valid Value: If you want no border radius, use 0 instead of none.
Specify a Length: If you want rounded borders, specify a valid length value (e.g., 5px, 1em).

Examples

Incorrect Usage

This is the incorrect way that leads to the validation error:

<style>
  .example {
    border-radius: none; /* Invalid value */
  }
</style>

Correct Usage

Here are correct alternatives:

Option 1: No Border Radius

<style>
  .example {
    border-radius: 0; /* Valid value for no rounded corners */
  }
</style>

Option 2: Specify a Border Radius

<style>
  .example {
    border-radius: 5px; /* Valid value for rounded corners */
  }
</style>

Conclusion

Replace border-radius: none; with either border-radius: 0; for no rounded corners or an appropriate pixel/em value for adding rounded corners. This will resolve the W3C Validator issue and ensure your CSS is compliant with the standards.

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.