Generador de contornos

• Creador visual de contornos con vista previa en vivo: El generador de contornos actualiza la vista previa y la salida CSS con cada cambio, sin pulsar ningún botón. Ajusta grosor, estilo, color y desplazamiento con deslizadores, selectores de color y botones de preajuste. Ve el efecto en un elemento en vivo en tiempo real.
• Comparación contorno vs borde: Ve la renderización de contorno y borde lado a lado con las mismas dimensiones y estilo de elemento. Activa/desactiva el borde y ajusta su grosor, estilo y color de forma independiente. Una tabla de comparación explica las diferencias clave entre contorno y borde en el modelo de caja CSS.
• 100 % privado - Sin subidas: Toda la generación de CSS ocurre localmente en tu navegador. Tus colores y ajustes nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para proyectos de clientes y diseños propietarios.
• Gratis y sin límites: Genera efectos de contorno ilimitados sin registro, sin suscripción y sin límites de uso. El generador de contornos es totalmente gratis para siempre, sin anuncios que bloqueen la interfaz.

• Estilizado de componentes de IU: Los diseñadores de IU usan el generador de contornos para crear indicadores de foco, estados seleccionados y efectos hover para componentes interactivos. Se prefiere outline para los anillos de foco porque no afecta al diseño ni provoca reflujo del contenido al activarse.
• Desarrollo y depuración de CSS: Los desarrolladores frontend usan el generador de contornos para experimentar con las propiedades outline antes de escribir CSS. La comparación lado a lado de contorno vs borde ayuda a entender cómo se comporta cada propiedad en el modelo de caja y cuál usar en distintos escenarios.
• Diseño de indicadores de foco: Los desarrolladores concienciados con la accesibilidad usan el generador de contornos para diseñar indicadores focus-visible personalizados que cumplen los requisitos de apariencia del foco de WCAG 2.4.11. outline permite crear anillos de foco visibles que no desplazan el diseño al enfocar.
• Cumplimiento de accesibilidad: Los especialistas en accesibilidad usan el generador de contornos para probar el contraste y la visibilidad de los indicadores de foco. La herramienta ayuda a garantizar que los colores de contorno tengan suficiente contraste contra los fondos de los elementos para cumplir WCAG AA.
• Aprendizaje y educación sobre CSS: Los estudiantes y docentes de CSS usan el generador de contornos para entender la diferencia entre outline y border. La comparación visual y la tabla de notas detalladas facilitan comprender cuándo usar cada propiedad.
• Definición de tokens de sistemas de diseño: Los responsables de sistemas de diseño usan el generador de contornos para definir tokens de contorno consistentes para estados de foco, estados de error e indicadores de selección. La herramienta ayuda a estandarizar el grosor, el estilo y el color del contorno en un sistema de diseño.

La propiedad CSS outline dibuja una línea alrededor de un elemento, fuera del borde del borde. A diferencia de border, outline no ocupa espacio en el modelo de caja: se dibuja encima del elemento sin afectar a su tamaño ni posición. Esto hace que outline sea ideal para indicadores de foco , estados de selección y depuración de diseños donde quieres un indicador visible sin alterar el flujo de la página.

1. Configura el contorno: Establece el grosor del contorno (0-20px), elige un estilo (solid, dashed, dotted, double, groove, ridge, inset, outset o none) y selecciona un color con el selector de color o la entrada HEX. La vista previa se actualiza al instante.
2. Ajusta el desplazamiento y el tamaño del elemento: Usa el deslizador de outline-offset para posicionar el contorno fuera (positivo) o dentro (negativo) del cuadro del borde del elemento. Ajusta la anchura, la altura, el radio de borde y el color de fondo del elemento para adaptarlos a tu caso de uso.
3. Compara con el borde: Activa/desactiva la vista previa del borde. Ajusta el grosor, el estilo y el color del borde de forma independiente. La vista previa lado a lado muestra cómo difieren contorno y borde en renderización y comportamiento en el modelo de caja.
4. Copia el CSS: Haz clic en "Copiar CSS" para copiar la declaración CSS completa de contorno y borde, lista para pegar en tu hoja de estilos.

• Indicadores de foco (especialmente con :focus-visible)
• Depuración de límites de elementos sin afectar al diseño
• Indicadores de accesibilidad que no deben provocar reflujo
• Estilos de impresión en los que quieres guías visibles
• Límites de elementos visibles que forman parte del diseño
• Estilizado por lado (border-top, border-right, etc.)
• Estados interactivos en los que los cambios de diseño son aceptables
• Separadores de celdas de tabla y componentes de tarjeta

El criterio de conformidad 2.4.11 de WCAG 2.2 (Apariencia del foco) exige que los indicadores de foco tengan una relación de contraste de al menos 3:1 frente a los colores adyacentes y sean al menos tan grandes como un contorno sólido de 2px. La propiedad CSS outline es la forma recomendada de implementar indicadores de foco porque no provoca desplazamientos de diseño cuando cambia el foco. Nuestro generador de contornos te ayuda a diseñar y probar indicadores de foco basados en outline que cumplen los requisitos de WCAG.