¿Qué es el radio del contorno en CSS?
El radio del contorno en CSS describe el redondeo visual de las esquinas del contorno de un elemento. CSS no tiene una propiedad outline-radius independiente ampliamente compatible, por lo que la forma renderizada suele seguir el radio del borde del elemento.
Cómo funciona el radio del contorno en CSS
Un contorno se dibuja alrededor de un elemento sin intervenir en las dimensiones de la caja, lo que lo hace útil para indicar el foco sin provocar desplazamientos en el diseño. Los controles redondeados complican esa geometría porque el contorno queda fuera del borde y el navegador renderiza su curva. En el CSS actual, los autores combinan outline, outline-offset y border-radius; no existe una propiedad outline-radius estándar que pueda ajustarse por separado. Esto corresponde a la etapa de definición de estilos de los estados de interacción y requiere pruebas visuales en distintos navegadores.
Datos clave
- A diferencia de un borde, un contorno no reserva espacio y puede no ser rectangular; su trazado exacto alrededor de cajas fragmentadas o redondeadas no sustituye la geometría del diseño.
- outline-offset aleja el contorno del borde o lo acerca a él, pero no define la curvatura de las esquinas, por lo que no puede especificar de forma independiente un radio distinto para el contorno.
- Eliminar el contorno de foco predeterminado sin un reemplazo igual de visible impide orientarse al navegar con el teclado; conviene comprobar los recortes y el bajo contraste para cada radio de los controles y nivel de zoom.
Cuándo es relevante el radio del contorno en CSS
Comprueba cómo se renderiza el contorno al diseñar indicadores de foco de teclado para botones y controles redondeados. Un navegador puede dibujar un contorno de forma distinta al borde, así que prueba su visibilidad en lugar de asumir que las curvas son idénticas.