O que é raio do contorno em CSS?
O raio do contorno em CSS descreve os cantos visuais arredondados do contorno de um elemento. O CSS não tem uma propriedade outline-radius independente com amplo suporte, portanto a forma renderizada normalmente segue o raio da borda do elemento.
Como o raio do contorno em CSS funciona
Um contorno é desenhado ao redor de um elemento sem participar das dimensões da caixa, o que o torna útil para indicar o foco sem causar deslocamento no layout. Controles arredondados complicam essa geometria porque o contorno fica fora do limite da borda e sua curva é renderizada pelo navegador. No CSS atual, quem desenvolve combina outline, outline-offset e border-radius; não há uma propriedade outline-radius padrão para ajustar separadamente. Esse trabalho faz parte da estilização dos estados de interação e exige testes visuais em diferentes navegadores.
Informações essenciais
- Diferentemente de uma borda, um contorno não reserva espaço e pode não ser retangular; seu desenho exato ao redor de caixas fragmentadas ou arredondadas não substitui a geometria do layout.
- outline-offset afasta ou aproxima o contorno do limite da borda, mas não define a curvatura dos cantos, portanto não pode especificar de forma independente um raio diferente para o contorno.
- Remover o contorno de foco padrão sem uma substituição igualmente visível prejudica a orientação na navegação por teclado; recortes e baixo contraste devem ser verificados em cada raio de controle e nível de zoom.
Quando o raio do contorno em CSS é importante
Verifique a renderização do contorno ao projetar indicadores de foco por teclado para botões e controles arredondados. Um navegador pode desenhar um contorno de forma diferente da borda, portanto teste a visibilidade em vez de presumir curvas idênticas.