CSS: “border-radius”: “none” não é um valor válido para “border-radius”.

A propriedade border-radius controla o arredondamento dos cantos de um elemento. Os seus valores válidos incluem comprimentos (por exemplo, 5px, 1em), percentagens (por exemplo, 50%), e palavras-chave CSS universais como inherit, initial e unset. Ao contrário de muitas outras propriedades relacionadas com bordas, border-radius não possui a palavra-chave none na sua sintaxe de valores.

Esta confusão surge tipicamente porque os programadores associam “sem efeito” com a palavra-chave none, que funciona para propriedades como border: none ou text-decoration: none. No entanto, border-radius descreve uma medição geométrica — o raio da curva do canto — portanto “raio zero” (0) é a forma correta de expressar ausência de arredondamento.

Usar um valor inválido significa que o navegador irá ignorar toda a declaração. Isto pode levar a resultados inesperados: se uma folha de estilos principal ou uma regra anterior definir um border-radius, a sua declaração none não irá sobrepor-se, e o elemento irá manter os seus cantos arredondados. Corrigir isto garante que o seu CSS está em conformidade com os padrões, comporta-se de forma previsível entre navegadores e passa na validação W3C.

Como corrigir

• Para remover o arredondamento, substitua none por 0.
• Para definir um raio específico, use um comprimento válido (5px, 0.5em), uma percentagem (50%), ou uma palavra-chave CSS universal (inherit, initial, unset).
• A mesma regra aplica-se às propriedades específicas: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius.

Exemplos

Incorreto: usar none

<style>
  .box {
    border-radius: none; /* "none" não é um valor válido para border-radius */
  }
</style>
<div class="box">Conteúdo</div>

Correto: remover cantos arredondados com 0

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

Correto: aplicar um raio específico

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

  .rounded {
    border-radius: 8px;
  }

  .pill {
    border-radius: 9999px;
  }
</style>
<div class="circle">Círculo</div>
<div class="rounded">Arredondado</div>
<div class="pill">Forma de pílula</div>

Correto: repor para o valor inicial

Se precisar de desfazer um border-radius definido por outra regra, pode usar initial ou unset, ambas resolvem para 0:

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

  .card.sharp {
    border-radius: initial; /* Repõe para 0 */
  }
</style>
<div class="card">Cartão arredondado</div>
<div class="card sharp">Cartão com cantos aguçados</div>

Saiba mais:

MDN Reference

MDN: CSS border radius

→