Probador Focus Ring

Vista previa de estilos outline · box-shadow al enfocar

Outline width (px)

Outline offset (px)

Outline color

Selector CSS

:focus-visible

:focus

Solo teclado (recomendado)

solid

dashed

dotted

Add box-shadow ring

Haga clic en un control o presione Tab para ver el anillo de enfoque.

CSS

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

Cómo usar

Ajuste el ancho del contorno, la compensación y el color usando las entradas numéricas y el selector de color.
Elija el estilo del contorno: sólido, punteado o punteado.
Opcionalmente, habilite box-shadow y establezca su extensión y color para un efecto de anillo dual.
Presione tabulación en el botón de vista previa o entrada para ver el anillo de enfoque renderizado en vivo.
Copie el CSS generado para usar en su propia hoja de estilos.

Ejemplos

Establecer ancho 3px, compensación 2px, color #0066FF, estilo sólido produce outline: 3px solid #0066FF; outline-offset: 2px; visible en el botón de vista previa cuando está enfocado.
Habilitar box-shadow con extensión 4px y color rgba(0,102,255,0.4) agrega un anillo de brillo suave alrededor del contorno.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.