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

The border-radius property controls the rounding of an element’s corners. Its valid values include lengths (e.g., 5px, 1em), percentages (e.g., 50%), and CSS-wide keywords like inherit, initial, and unset. Unlike many other border-related properties, border-radius has no none keyword in its value syntax.

This confusion typically arises because developers associate “no effect” with the keyword none, which works for properties like border: none or text-decoration: none. However, border-radius describes a geometric measurement — the radius of the corner curve — so “zero radius” (0) is the correct way to express no rounding.

Using an invalid value means the browser will ignore the entire declaration. This can lead to unexpected results: if a parent stylesheet or an earlier rule sets a border-radius, your none declaration won’t override it, and the element will retain its rounded corners. Fixing this ensures your CSS is standards-compliant, behaves predictably across browsers, and passes W3C validation.

How to fix it

• To remove rounding, replace none with 0.
• To set a specific radius, use a valid length (5px, 0.5em), a percentage (50%), or a CSS-wide keyword (inherit, initial, unset).
• The same rule applies to the longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Examples

Incorrect: using none

<style>
  .box {
    border-radius: none; /* "none" is not a valid border-radius value */
  }
</style>
<div class="box">Content</div>

Correct: removing rounded corners with 0

<style>
  .box {
    border-radius: 0;
  }
</style>
<div class="box">Content</div>

Correct: applying a specific radius

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .rounded {
    border-radius: 8px;
  }

  .pill {
    border-radius: 9999px;
  }
</style>
<div class="circle">Circle</div>
<div class="rounded">Rounded</div>
<div class="pill">Pill shape</div>

Correct: resetting to the initial value

If you need to undo a border-radius set by another rule, you can use initial or unset, both of which resolve to 0:

<style>
  .card {
    border-radius: 12px;
  }

  .card.sharp {
    border-radius: initial; /* Resets to 0 */
  }
</style>
<div class="card">Rounded card</div>
<div class="card sharp">Sharp-cornered card</div>

Learn more:

MDN Reference

MDN: CSS border radius

→