CSS: “border-radius”: “none” no es un valor válido para “border-radius”.

La propiedad border-radius controla el redondeado de las esquinas de un elemento. Sus valores válidos incluyen longitudes (por ejemplo, 5px, 1em), porcentajes (por ejemplo, 50%) y palabras clave CSS globales como inherit, initial y unset. A diferencia de muchas otras propiedades relacionadas con bordes, border-radius no tiene la palabra clave none en su sintaxis de valores.

Esta confusión suele surgir porque los desarrolladores asocian “sin efecto” con la palabra clave none, que funciona para propiedades como border: none o text-decoration: none. Sin embargo, border-radius describe una medida geométrica — el radio de la curva de la esquina — por lo que “radio cero” (0) es la forma correcta de expresar que no hay redondeado.

Usar un valor inválido significa que el navegador ignorará toda la declaración. Esto puede llevar a resultados inesperados: si una hoja de estilos padre o una regla anterior establece un border-radius, tu declaración none no la anulará, y el elemento conservará sus esquinas redondeadas. Corregir esto asegura que tu CSS cumpla con los estándares, se comporte de manera predecible en todos los navegadores y pase la validación de W3C.

Cómo solucionarlo

• Para eliminar el redondeado, reemplaza none con 0.
• Para establecer un radio específico, utiliza una longitud válida (5px, 0.5em), un porcentaje (50%) o una palabra clave CSS global (inherit, initial, unset).
• La misma regla se aplica a las propiedades específicas: border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.

Ejemplos

Incorrecto: usar none

<style>
  .box {
    border-radius: none; /* "none" no es un valor válido para border-radius */
  }
</style>
<div class="box">Content</div>

Correcto: eliminar esquinas redondeadas con 0

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

Correcto: aplicar un radio específico

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

Correcto: restablecer al valor inicial

Si necesitas deshacer un border-radius establecido por otra regla, puedes usar initial o unset, ambos se resuelven a 0:

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

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

Más información:

MDN Reference

MDN: CSS border radius

→