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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-border-radius-none-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 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`

```html
<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`

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

### Correct: applying a specific radius

```html
<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`:

```html
<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>
```