Testador Focus Ring

Visualização de estilo outline · box-shadow ao focar

Outline width (px)

Outline offset (px)

Outline color

Seletor CSS

:focus-visible

:focus

Apenas teclado (recomendado)

solid

dashed

dotted

Add box-shadow ring

Clique em um controle ou pressione Tab para ver o anel de foco.

CSS

:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Como usar

Ajuste largura do contorno, deslocamento e cor usando as entradas numéricas e seletor de cores.
Escolha o estilo do contorno: solid, dashed ou dotted.
Opcional, ative box-shadow e defina seu spread e cor para um efeito de anel duplo.
Abra a aba no botão de visualização ou na entrada para ver o anel de foco renderizado ao vivo.
Copie o CSS gerado para usar em seu próprio stylesheet.

Exemplos

Definir largura 3px, deslocamento 2px, cor #0066FF, estilo solid produz outline: 3px solid #0066FF; outline-offset: 2px; visível no botão de visualização quando focado.
Ativar box-shadow com spread 4px e cor rgba(0,102,255,0.4) adiciona um anel de brilho suave ao redor do contorno.